CSS Shapes

CSS Shapes est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.

Exemple simple

Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété shape-outside qui lui est appliquée vaut circle(50%). Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.

Référence

Propriétés

• shape-image-threshold
• shape-margin
• shape-outside

Types de donnée

• <basic-shape>

Guides

• Un aperçu des formes CSS (CSS Shapes)
• Les formes appliquées aux différentes boîtes
• Des formes simples
• Des formes à partir d'images
• Éditer les contours d'une forme en CSS dans Firefox

Ressources externes

• Une liste de ressources sur les formes CSS (en anglais)
• CSS Shapes 101 (en anglais)
• Creating non-rectangular layouts with CSS Shapes (en anglais)
• How To Use CSS Shapes In Your Web Design (en anglais)
• How To Get Started With CSS Shapes (en anglais)
• What I Learned In One Weekend With CSS Shapes (en anglais)
• CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components (en anglais)

Spécifications