Box with a triangle like a chat

Question

I want to make with CSS a rectangular box followed by a little triangle, like this. And i've done it but i would like the same output with the ":after". I've tried but i can't print anything.

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>

When you use ``position:absolute``, keep in mind to use ``top, left, right, bottom`` rules more then ``margins``. And in cases like this, give the parent a ``position: relative`` — Ardian, Apr 28 '16 at 17:21
You may already find your answer here: [Speech bubble with arrow](http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow) — jbutler483, Apr 30 '16 at 17:13

score 8 · Accepted Answer · answered Apr 28 '16 at 17:17

Here's the same output with :after property :

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

Farhad · Answer 2 · 2016-04-28T17:20:39.067

i think this site help you : 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>

nikoloza · Answer 3 · 2016-04-29T13:17:13.507

Kadriles is right, but I already made simple example without any negative margin or box sizes

.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>

score 2 · Answer 4 · answered Apr 28 '16 at 17:27

#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>

score 1 · Answer 5 · answered Apr 28 '16 at 17:19

When using :after content must be defined, since your element has no text content simply do this!

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);
}

Shady Alset · Answer 6 · 2016-04-28T18:04:38.283

I found an example with IOS Style and left / right (Sender / Receiver ) possibility maybe helps:

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">
  Stackoverflow.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>

score 0 · Answer 7 · answered Mar 12 '19 at 12:33

If you want to have a border around the shape and more adaptable, try this: 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

7 Answers7

Linked