Create Ribbon Banner Element
The ribbon inside the container
We can now think about our next rectangle. Once again, drawing an imaginary boundary around that shape will really help us think about it pragmatically:
Just by drawing this shape outline in my head (or in Figma if needed!), I can derive some very useful information:
- The shape is “clipped” by the parent square shape. What spills out of that original square is invisible.
- The bottom of the new shape aligns with the top-left and bottom-right corners of the parent square. This knowledge will come super handy in a minute!
Let’s create a new HTML element for this inner banner. We likely want the entire thing to be clickable, and assuming it will link to some page on the internet, we’ll use an anchor tag for it:
I’ve changed the container square’s background color to
bg-amber-100, since our banner is now using that
The container square will eventually be transparent, but for now it helps being able to visualise it.
I also gave the anchor tag a
block display (it’s
inline by default), so that is uses the full width of the container. We’ll remove that later.
Here’s what we have:
Ok. Not quite there yet. But now, the real fun begins!
We're going to use an anchor tag element for the ribbon, so the banner can be clicked to take the user somewhere. Let's go with A. For the text, let's go with "My cool ribbon". Nice.
We wanted to give these a background of amber-300, which is currently the color of the container. We want to reduce the container to be amber-100 only. Up here, let's change amber-300 to amber-100.
In the anchor tag, let's give a class of bg-amber-300. Let's make the anchor behave as a block level element with display, block.