How to Create a Comment Box with a Containing Text Using CSS

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.