Créer des formes à partir des boîtes

Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).

En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.

La valeur margin-box correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si border-radius a été utilisé sur l'élément.

Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément <div> avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété border-radius a été utilisée afin de créer le cercle avec border-radius: 50%. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.

La valeur border-box correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si border n'a pas explicitement été utilisé. Si c'est le cas, border-box sera équivalent à padding-box et la forme suivra le bord extérieur de la boîte de remplissage.

Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.

La valeur padding-box correspond à la forme définie par le bord extérieur de la boîte de remplissage (padding). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, padding-box sera équivalent à content-box.

La valeur content-box correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre 0 et border-radius − border-width − padding. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.

Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété border-radius. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).

Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur border-radius de 100% dans la direction la plus proche du texte.

Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.