Alex Colucci Alex Colucci - 7 months ago 11
HTML Question

Box with a triangle like a chat

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

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

Comments