Développeur / Formes CSS
Générateur de clip-path CSS : polygone, cercle, ellipse et inset
Créez des découpes CSS avec six préréglages de polygone, des points déplaçables et réglables au clavier, ainsi que des contrôles pour les cercles, ellipses et inset. Prévisualisez un dégradé ou une image locale, puis copiez le CSS en pourcentage ou en pixels.
Générateur de clip-path CSS : polygone, cercle, ellipse et inset: Adapte l’aperçu à la forme sélectionnée sans modifier le fichier image sous-jacent. La sortie en pourcentage suit les dimensions de l’élément. La sortie en pixels utilise la largeur et la hauteur de référence ; l’aperçu affiché est mis à l’échelle pour s’adapter à votre écran. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils développeur
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
Faites glisser un point numéroté, utilisez ses touches fléchées ou saisissez ses coordonnées. Les coordonnées ci-dessous sont des pourcentages ; la sortie en pixels utilise la taille de référence.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Les formes en pourcentage se redimensionnent avec l’élément. Les pourcentages du cercle utilisent la diagonale normalisée ; ceux de l’ellipse utilisent la largeur et la hauteur. Les coordonnées en pixels sont fixes par rapport aux dimensions de référence.
Découpage CSS
clip-path sur MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Le découpage modifie la région visible sans changer la boîte de mise en page de l'élément.
Coordonnées des formes de base
W3C CSS Shapes niveau 1, formes de base : https://www.w3.org/TR/css-shapes-1/#basic-shapes . Les coordonnées du polygone et les rayons de l'ellipse sont calculés par rapport à la boîte de référence ; les pourcentages du cercle utilisent sa diagonale normalisée. Les coordonnées prédéfinies et le dégradé sont des créations originales.
Comment l'utiliser
- Choisissez une forme et un préréglage, puis définissez les dimensions de référence.
- Déplacez les points du polygone, utilisez les touches fléchées ou modifiez les coordonnées ; réglez les contrôles pour les autres formes.
- Choisissez une sortie en pourcentage ou en pixels, puis copiez le CSS.
Confidentialité et limitations
Les aperçus d’images facultatifs restent sur votre appareil. Rien n’est téléversé.
Outils associés
Questions fréquentes
Comment modifier un point sans le déplacer à la souris ?
Placez le focus sur sa poignée numérotée et utilisez les touches fléchées, ou saisissez les pourcentages X et Y dans la liste des points. Les polygones doivent comporter au moins trois points.
Est-ce que cet outil exporte une image recadrée ?
Non. Il exporte du CSS pour un élément HTML. L’image locale sert uniquement d’aperçu.
Comment les pourcentages des cercles sont-ils mesurés ?
CSS utilise la diagonale normalisée, sqrt((largeur au carré + hauteur au carré) / 2), comme référence pour le rayon du cercle. Les rayons de l’ellipse utilisent séparément la largeur et la hauteur.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis