Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Create a Comment Box with a Containing Text Using CSS
A comment box with a containing text can be created using the CSS clip-path property. This technique creates speech bubble-like elements that visually connect to specific text content on the page, making it clear which text the comment refers to.
Syntax
selector {
clip-path: polygon(points);
}
Example 1: Multiple Comment Boxes
The following example shows how to create comment boxes with different orientations −
<!DOCTYPE html>
<html>
<head>
<style>
.cb {
position: relative;
padding: 20px;
border-radius: 15px;
width: 25%;
margin-bottom: 50px;
font-family: Arial, sans-serif;
color: white;
font-weight: bold;
}
.cb::after {
content: "";
position: absolute;
height: 30px;
width: 30px;
bottom: -30px;
}
#one {
box-shadow: inset 0 0 12px green;
background-color: rgba(0, 128, 0, 0.2);
margin-left: 65%;
}
#two {
box-shadow: inset 0 0 12px blue;
background-color: rgba(0, 0, 255, 0.2);
margin-left: 4%;
}
#one::after {
left: 80%;
box-shadow: inset 0 0 12px green;
background-color: rgba(0, 128, 0, 0.2);
clip-path: polygon(0 0, 100% 0, 100% 80%);
}
#two::after {
left: 8%;
box-shadow: inset 0 0 12px blue;
background-color: rgba(0, 0, 255, 0.2);
clip-path: polygon(0 0, 100% 0, 0 80%);
}
</style>
</head>
<body>
<div class="cb" id="one">
Demo Comment 1
</div>
<div class="cb" id="two">
Demo Comment 2
</div>
</body>
</html>
Two comment boxes appear: a green one on the right with a pointer facing right, and a blue one on the left with a pointer facing left, creating speech bubble effects.
Example 2: Comment Box Highlighting Text
This example demonstrates how to create a comment box that points to specific highlighted text −
<!DOCTYPE html>
<html>
<head>
<style>
.cb {
position: relative;
padding: 15px;
border-radius: 10px;
width: 15%;
box-shadow: inset 0 0 12px orange;
background-color: rgba(255, 165, 0, 0.2);
margin-left: 65%;
margin-bottom: 40px;
font-family: Arial, sans-serif;
font-weight: bold;
color: #333;
}
.cb::after {
content: "";
position: absolute;
height: 30px;
width: 30px;
bottom: -30px;
left: 10%;
box-shadow: inset 0 0 12px orange;
background-color: rgba(255, 165, 0, 0.2);
clip-path: polygon(0 0, 100% 0, 0 80%);
}
span {
background-color: lightblue;
padding: 2px 4px;
border-radius: 3px;
font-weight: bold;
}
p {
line-height: 1.6;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="cb">
Important Term
</div>
<p>
Aenean tempor lobortis porttitor. Nulla erat purus, commodo <span>accumsan</span> viverra id, sollicitudin eget dui. Curabitur mollis scelerisque quam, vitae dictum diam dictum in. Aenean fermentum efficitur suscipit. Donec non ligula purus.
</p>
</body>
</html>
An orange comment box labeled "Important Term" appears above a paragraph, with a triangular pointer pointing down to the highlighted word "accumsan" in the text below.
Key Properties
| Property | Purpose |
|---|---|
clip-path: polygon() |
Creates the triangular pointer shape |
::after pseudo-element |
Adds the pointer without extra HTML |
position: absolute |
Positions the pointer relative to the comment box |
box-shadow |
Provides visual depth and styling |
Conclusion
Using clip-path with ::after pseudo-elements creates effective comment boxes that visually connect to specific text content. This technique is perfect for annotations, tooltips, and highlighting important information on web pages.
Updated on: 2026-03-15T15:20:57+05:30
699 Views
Advertisements