MoreLesson 195Free preview
Ribbon
This lesson is part of How To · All levels
Summary
A ribbon is a small ribbon that is affixed to the corner of a card or picture, usually to mark a new product, discount, or special status. The effect is created by placing the absolute position inside the relative position of the container, and then twisting it slightly to make it look like the original tape. The overflow hidden on the conductor ensures that the strip section that exits the area does not disturb the layout.
Key points
- The parent container must position: relative as the reference point of the tape position
- The tape itself uses position: absolute with top and right values.
- Transform: rotate(45deg) gives the impression of slanted bands at an angle
- Overflow: hidden on the parent scraping the strip out of the card
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.