带有三角形的盒子就像聊天

Question

我想用 CSS 制作一个矩形框，后面跟着一个小三角形，例如 this。我已经做到了，但我想要与“：之后”相同的输出。我已经试过了，但我无法打印任何东西。

p {
        display:inline-block;
        padding:5px 6px 8px 6px;
        border-radius: 6px;
        float: right;
        margin-right: 40px;
        color:black;
        background-color:#146f79;
}

span {
            position:absolute;
            margin-top:-6px;
            margin-left:-5px;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #146f79;
            transform:rotate(-45deg);
}

<p>
Hello!!!<span></span>
</p>

Answer 1

我认为这个网站可以帮助您： https://css-tricks.com/examples/ShapesOfCSS/

#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

#talkbubble:before { content:""; position: absolute; left: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-left: 26px solid red; border-bottom: 13px solid transparent; }

<div id="talkbubble"></div>

Answer 2

这是与 :after 属性相同的输出：

HTML

<p>
  Hello!!!
</p>

CSS

p {
  display:inline-block;
  padding:5px 6px 8px 6px;
  border-radius: 6px;
  float: right;
  margin-right: 40px;
  color:black;
  background-color:#146f79;
  position: relative;
}

p:after {
  content: "";
  position:absolute;
  margin-top:-6px;
  margin-left:-5px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #146f79;
  transform:rotate(-45deg);
  right: -15px; 
  top: 10px;
}

Fiddle

Answer 3

使用 :after 时必须定义内容，因为您的元素没有文本内容，只需这样做！

p:after {
    content: "";
    position:absolute;
    margin-top:-6px;
    margin-left:-5px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #146f79;
    transform:rotate(-45deg);
}

Answer 4

#chatbubble {
   margin-left:25px;
   width:120px;
   height:40px;
   background-color:green;
   position:relative;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   line-height:40px;
   text-align:center;
}
#chatbubble:after {
   content:"";
   position:absolute;
   right:-13px;
   border-right:13px solid transparent;
   border-left:13px solid transparent;
   border-top:13px solid green;
}

<div id="chatbubble">Hello</div>

Answer 5

Kadriles 是对的，但我已经做了一个没有任何负边距或框尺寸的简单示例

.bubble {
  position: absolute;
  background: slategray;
  color: white;
  padding: 6px 10px;
  border-radius: 5px 0 5px 5px;
}

.bubble:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  border-top: 8px solid slategray;
  border-right: 12px solid transparent;
}

<div class="bubble">Hello</div>

Answer 6

我找到了一个 IOS 样式 和 左/右（发送方/接收方）的示例 可能有帮助：

body {
  background-color: #eee;
  color: #222;
  font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  padding: 40px 20px;
  margin: 0 auto;
  width: 400px;
}

.bubble {
  background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.25, rgb(210,244,254)),
 color-stop(1, rgb(149,194,253))
  );
  border: solid 1px rgba(0, 0, 0, 0.5);
  /* vendor rules */
  border-radius: 20px;
  /* vendor rules */
  box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  /* vendor rules */
  box-sizing: border-box;
  clear: both;
  float: left;
  margin-bottom: 20px;
  padding: 8px 30px;
  position: relative;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  width: auto;
  max-width: 100%;
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 10px;
  content: '';
  display: block;
  position: absolute;
}

.bubble:before {
 border: 10px solid transparent;
 border-bottom-color: rgba(0, 0, 0, 0.5);
 bottom: 0;
 left: -7px;
 z-index: -2;
}

.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #d2f4fe;
  bottom: 1px;
  left: -5px;
}

.bubble--alt {
  background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.25, rgb(172,228,75)),
 color-stop(1, rgb(122,205,71))
  );
  float: right;
}

.bubble--alt:before {
  border-bottom-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px / 10px;
  left: auto;
  right: -7px;
}

.bubble--alt:after {
  border-bottom-color: #ace44b;
  border-radius: 20px / 10px;
  left: auto;
  right: -5px;
}

<div class="container">
 <div class="bubble">
  Box with a triangle like a chat
 </div>
 
 <div class="bubble bubble--alt">
  whosebug.com
 </div>
 
 <div class="bubble">
  Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum, cu tale erat vivendo pri. Ne nec nibh dicant quaestio. At sit erant movet possim, no viderer forensibus duo.
 </div>
 
 <div class="bubble bubble--alt">
  Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum.
 </div>
 
</div>

Answer 7

如果你想在形状周围有一个边框并且更具适应性，试试这个： https://jsfiddle.net/8qg9o3a6/7/

HTML

<div class="bubble-container">This is a bubble</div>

CSS

:root {
  --right: -40px;
  --sizearrow: 20px;
  --height: 120px;
  --top: calc(var(--height)/2 - var(--sizearrow));
  --bordercolor: #000;
}

.bubble-container {
    position: relative;
    border: 2px solid var(--bordercolor);
    margin: 0 auto;
    border-radius: 10px;
    height: var(--height);
    width: 465px;
}

.bubble-container::after {
  content: '';
    position: absolute;
    right: var(--right);
    top: calc(var(--top) + 1.5px);
    width: 0;
    height: 0;
    border: var(--sizearrow) solid transparent;
    border-left-color: #fff;
}

.bubble-container::before {
  content: '';
    position: absolute;
    right: calc(var(--right) - 5px);
    top: var(--top);
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-left-color: var(--bordercolor);
}

带有三角形的盒子就像聊天

Box with a triangle like a chat

html

css

css-shapes