Create triangle badge at the corner of a div
Recently I had to create a triangle at the right top corner of a block with a "Pro" label. Something like this:
Usually we use borders to create triangles in CSS. But I can never remember how to do that. However, in this case. since the triangle is at the corner of a block, I found another neat trick.
We could do this:
1. Create a div
with class badge
2. Make it a square
3. Position the square such that the center of the square is at the right top corner of the block
4. Now rotate it 45 degrees
5. Hide the portion of square that's outside of the block.
That's it! We get our triangle shaped badge. And for the text within, we can simply add a paragraph within .badge
and push it to the bottom using margin
. Since our badge is already rotated, the paragraph also appears rotated.
This is a quick neat trick. You can use a similar trick for a ribbon like this too.
I'll leave this for you to try out :) Hope you learned something new this week!
📘 Complete Guide to CSS Flex and Grid
If you loved this write-up and how it was explained, you’ll absolutely love my eBook CSS Flex and Grid. Check it out!
📨 Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.