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

Types de donnée

Guides

Ressources externes

Spécifications

Spécification État Commentaires
CSS Shapes Module Level 1 Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

shape-outside

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0
<image>Chrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0
<gradient>Chrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0
inset()Chrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0
circle()Chrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0
polygon()Chrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

shape-margin

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1
Préfixée
Support complet 10.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

shape-image-threshold

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, xdelatour
Dernière mise à jour par : SphinxKnight,