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

Precise Banner Width Calculation

We've worked out the rotation and position of our banner. Next, you want to figure out what width it should have. Currently, our ribbon has a width of w-40. As you can see, it's not quite enough. It's a little bit too short.

We want to avoid nudging the width until we find the right value using magic numbers.

If you look at implementations of ribbons in the world, if you search for CSS ribbon, then look at most code examples, you will find that width is set as a random value, something like 276px, which is typically a magic number.

Your task is to try to figure out the exact width the ribbon should have but also be able to explain why you've chosen that number.

It should look like this:

Banner width calculationLoading

Transcript

We've worked out the rotation and position of our banner. The next thing we want to figure out is what width it should have. Currently, our ribbon has a width of w-40. As you can see, it's not quite enough. It's a little bit too short.

What we want to try and avoid doing here is nudge the width until we find the right value using magic numbers. If you look at implementations of ribbons in the world, if you search for CSS ribbon, then look at most code examples, you will find that width set as a random value, something like 276 pixels, which is typically a magic number.

What you need to try to do is figure out the exact width the ribbon should have, but also be able to explain why you've chosen that number. Good luck.