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

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2