Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create a Comment Box with a Containing Text Using CSS
Comment box can be created using clip-path property
Syntax
The syntax of CSS clip-path property is as follows −
Selector {
clip-path: /*value*/
}Example
The following examples show how we can create a comment box using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.cb {
position: relative;
padding: 2%;
border-radius: 8%;
width:25%;
}
.cb::after {
content: "";
position: absolute;
height: 30px;
width: 30px;
bottom: -30px;
left: 80%;
}
#one {
box-shadow: inset 0 0 12px green;
left: 65%;
}
#two {
box-shadow: inset 0 0 12px blue;
left: 4%;
}
#one::after {
left: 80%;
box-shadow: inset 0 0 12px green;
clip-path: polygon(0 0, 100% 0, 100% 80%);
}
#two::after{
left: 8%;
box-shadow: inset 0 0 12px blue;
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>This gives the following output
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cb {
position: relative;
padding: 2%;
border-radius: 8%;
width:15%;
box-shadow: inset 0 0 12px orange;
}
.cb::after {
content: "";
position: absolute;
height: 30px;
width: 30px;
bottom: -30px;
left: 80%;
box-shadow: inset 0 0 12px orange;
}
#one {
left: 65%;
}
#one::after {
left: 10%;
clip-path: polygon(0 0, 100% 0, 0 80%);
}
span{
background-color: lightblue;
}
</style>
</head>
<body>
<div class="cb" id="one">
accumsan
</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>This gives the following output
Updated on: 10-Feb-2021
402 Views
Advertisements