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.

The following properties define a rectangular shape.

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

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>
Try </>

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.