Comment couper une lettre ou un élément en plusieurs morceaux ?
Clip-path
Clip-path permet de faire un masque sur un élément HTML.
Différentes valeurs sont possibles :
clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('…'); …
La valeur inset(0) permet de cacher comme un overflow:hidden, mais avec la possibilité de faire un position:absolute.
See the Pen a by Benoît Wimart (@benoitwimart) on CodePen.
La grille (grid)
Le display grid divise en tranches horizontales (un enfant = une tranche).
See the Pen AAA by Benoît Wimart (@benoitwimart) on CodePen.
Combinaison
Il manque un truc ;¬)
See the Pen AAAAA by Benoît Wimart (@benoitwimart) on CodePen.
On jongle avec absolute/relative…
See the Pen A&a by Benoît Wimart (@benoitwimart) on CodePen.
Variation
See the Pen Aa by Benoît Wimart (@benoitwimart) on CodePen.