jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur de fonction CSS shape()

Generez des fonctions CSS shape() pour des formes non rectangulaires avec clip-path et shape-outside.

Chargement de l'outil...

Qu'est-ce que Generateur de fonction CSS shape() ?

CSS shape() (Baseline 2026, Chrome 139+) cree des formes non rectangulaires pour clip-path et shape-outside. Supporte les pourcentages, les boites de reference et les transitions animees entre types de formes.

Réponse rapide

Formes CSS avec shape() : polygon, circle, ellipse, path, rect. Chrome 139+, Safari 18.2+. Avec repli pour les navigateurs non supportes.

Last updated: 2026-06-02

Limites

  • Support limite a Chrome 139+ et Safari 18.2+.
  • shape() polygon necessite des unites explicites.
  • Interpolation imparfaite entre geometries tres differentes.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez le type de forme.
  2. Choisissez la boite de reference.
  3. Configurez les coordonnees.
  4. Copiez le CSS avec repli legacy.

A quoi il sert

  • Masques d'image non rectangulaires.
  • Enroulement de texte autour d'images.
  • Animations entre polygone et cercle.

Cas d'usage

Exemples concrets

Exemple

Masque hero anime

Polygone au chargement, rectangle complet au defilement, avec transition CSS.

Exemple

Texte autour d'une photo circulaire

shape-outside: shape() circle at 50% 50% avec padding-box.

Erreurs frequentes

  • Coordonnees pixels moins responsives que les pourcentages.
  • Syntaxe shape() necessite des unites explicites.
  • Appliquer shape() sans repli Firefox.

Vérification

  1. Appliquez shape() dans Chrome 139+, verifiez le style calcule.
  2. Ajoutez une transition CSS et testez l'animation au survol.

FAQ

Questions sur Generateur de fonction CSS shape()

Difference avec polygon(), circle()?

shape() unifie et remplace les fonctions legacy avec pourcentages, boites de reference et animations cross-type.

Animation polygone vers cercle?

Oui, contrairement aux fonctions legacy qui necessitent le meme nombre de sommets.

Boite de reference pour shape-outside?

padding-box est generalement meilleur pour l'enroulement de texte.

Support navigateur?

Chrome 139+, Safari 18.2+. Pas Firefox. Repli obligatoire.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi