border properties don't work without content:"" property. This property ensures the presence of a piece of content.
css rounded shape for comment
This is round shaped comment area. The width, height and border-radius properties form an ellipse shape.
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.
In the above example, the border properties make a triangular shape.
Was this article helpful?
This is
comment container.
It may be used on
input elements.