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>

Answer 1

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>

Answer 2

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

Answer 3

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>

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

Answer 6

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