A comment box with an arrow and containing an inner text can be created in CSS by using the clip-path property.
- The element containing the comment text is a normal rectangular element.
- The triangular arrow that gives it a shape of a comment is an ::after pseudo element. This triangle is created using CSS clip-path.
Demo
HTML & CSS :
<div id="comment-box">Hello how are you doing? <br />How are the kids ?</div>
#comment-box {
background-color: #003BDE;;
position: relative;
padding: 20px;
color: white;
}
#comment-box::after {
content: "";
position: absolute;
height: 25px;
width: 25px;
bottom: -25px;
left: 90%;
background-color: #003BDE;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
Creating the Triangle
The triangle has been created using the CSS polygon() shape function to create a 3-sided polygon. Read Creating a Triangle Using CSS clip-path to know more.
By changing the dimensions and co-ordinates of the vertices, triangles of various types can be created.
Furthermore by changing the top / left / bottom / right properties, the triangle can be placed at different positions in the comment box.
How are the kids ?