Loading
Flexible Ribbon Banner with 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.
Loading exercise

Transcript

0:00 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.

0:17 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.