css square comment shape (with isosceles shape)

This is used to add a comment for input field. Its shape is square type with isosceles triangle.

Define width and height of the .comment class element.

Example

<style>
.comment{
 width:200px;
 height:100px;
 background:lightgreen;
}
</style>
Try </>

Now style the '::after' pseudo element.

Example

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

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

border properties design the isosceles shape.

Was this article helpful?

 

Email:

Message: