Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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: 2021-02-10T13:05:31+05:30
627 Views
Advertisements