Loading
Build a Flexible Ribbon Banner in Tailwind CSS Tutorial (10 exercises)
solution

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:

boundary shapeLoading

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 amber-300.

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:

my cool ribbonLoading

Ok. Not quite there yet. But now, the real fun begins!

Transcript

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.