css rounded shape for comment

This is round shaped comment area. The width, height and border-radius properties form an ellipse shape.

Example

This is
comment container.
It may be used on
input elements.

Try </>

The best thing about the learning is the way you think and not the destination.

Example

<style>
.round-comment{
 width:200px;
 height:180px;
 border-radius:50%;
 background:lightgreen;
 text-align:center;
 position:absolute;
 font-size:15px;
}
</style>
Try </>

Now we will use the simple '::after' pseudo class with the .round-comment class.


Example

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

position:absolute property positions the ::after with respect to the .comment-round class element.

top:95px means the top side of '::after' is 95px away from top side of .comment-round class element.

left:30px means the left side of '::after' is 30px away from left side of .comment-round class element.


border properties don't work without content:"" property. This property ensures the presence of a piece of content.

In the above example, the border properties make a triangular shape.

Was this article helpful?

 

Email:

Message: