Pour s’entrainer, voici un exercice pratique.
Comment mettre un fond rectangulaire incliné derrière un titre (droit) ?
Avec les éléments h1 et span
Pour être dans le respect de la sémantique, je dois mettre le texte avec une balise de titrage (ici h1, mais h2 peut convenir si vous êtes dans une sous-partie de la page).
Pour mettre un fond seulement derrière le texte, il faudra ajouter une span, une balise neutre utilisée pour des réglages « visuels ». Enfin pour incliner le fond, il faudra pivoter celui-ci dans un sens et le texte dans l’autre, ce qui ajoute une seconde span.
See the Pen pastille by Benoît Wimart (@benoitwimart) on CodePen.
Avec les pseudo-élements
Cette variante est assez complexe, elle aborde des notions des prochains cours et des astuces CSS.
See the Pen pastille et pseudo élement by Benoît Wimart (@benoitwimart) on CodePen.