CSS square shape for comment (with triangular shape)

This is used to do a comment for input field. Its shape is square type with triangule. It may be used on input elements.

<style>
.square-comment{
position:absolute;
width:200px;
height:100px;
background:lightgreen;
border-radius:5px;
}
.square-comment::after{
position:absolute;
content:"";
top:100px;
left:20px;
border-top:30px solid lightgreen;
border-right:30px solid transparent;
}
</style>

<div class="square-comment">
 <p>Web4College</p>
</div>

The following properties define a rectangular shape.

<style>
.square-comment{
width:200px;
height:100px;
background:lightgreen;
border-radius:5px;
}
</style>

Now use the '::after' pseudo element.

<style>
.square-comment::after{
position:absolute;
content:"";
top:100px;
left:20px;
border-top:40px solid lightgreen;
border-right:40px solid transparent;
}
</style>

position:absolute property positions the ::after pseudo element.

top and left properties represent the horizontal and vertical distances of the ::after pseudo element.

border properties design a triangular shape.