Create a badge that says $35 in the form of a pink rectangle with a thick black border. Make the right side an inset triangle so that it has the shape of a flag. Make sure the border follows closely on the shape
Use only CSS
I'll create a price badge that looks like a flag with CSS. This design uses a combination of positioning and clip-path to achieve the flag shape with the inset triangle on the right side.
I've created three different implementations of the price badge:
All three implementations create a flag-shaped badge with:
The technique used is:
clip-path with a polygonYou can use any of these implementations based on your project requirements. The pure CSS version is the simplest if you just need the HTML/CSS without React.
The triangle is currently facing out, but it should instead cave in
You're right! Let me fix that to make the triangle cave inward instead of pointing outward.
I've updated all three implementations to make the triangle cave inward instead of pointing outward. The key change was modifying the clip-path polygon points to create a concave shape on the right side.
The new polygon shape:
This creates a flag-like shape with an inward triangle on the right side, while maintaining the thick black border that follows the shape closely. I've also added a new file inset-badge.tsx that demonstrates this updated design.
The badge now has:
the color of the badge should be pink, with a black border and $35 visible within it. Ensure it's not just a solid black badge but has a pink middle with a black border