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

Create a Wraparound Effect

Your task is to make a wraparound effect to finish off our ribbon banner. We'll do this in three steps.

  1. Cropping the ribbon to the container area.
  2. Adding darker elements "behind" the corners.
  3. Rounding the ribbon corners.

Looking at a design example, imagine an actual ribbon wrapping around a piece of cardboard, and the light would come from up here.

Wraparound EffectLoading

These parts would be in the shade and, therefore, a bit darker. Also, rounding the corners a little bit sells the effect even more!

It should look like this:

Wraparound effectLoading

Transcript

All right. Let's now create a wraparound effect to finish off our ribbon banner. We'll do this in three steps. First, we'll crop the ribbon to the container area, which is this element here, and then we'll add darker elements behind the corners and around those corners, to create this illusion that the ribbon wraps around.

Looking at a design example, imagine a real ribbon wrapping around a piece of cardboard, and the light would come from up here. These parts here and there would be in the shade and therefore a bit darker, and also rounding the corners a little bit sells the effect even more. That's your task for this final challenge. Good luck.