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

CSSWeb DevelopmentFront End Technology

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.

 Live Demo

<!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

 Live Demo

<!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

raja
Published on 10-Feb-2021 13:03:46
Advertisements