Générateur de clip-path CSS
Modifiez visuellement des formes CSS clip-path grâce à des préréglages, des points de polygone déplaçables et des curseurs. Copiez le CSS clip-path.
🔒 S'exécute entièrement dans votre navigateur — rien n'est téléchargéConcevez visuellement des formes CSS clip-path
La propriété clip-path vous permet de découper un élément selon presque n'importe quelle forme, uniquement en CSS. Avatars hexagonaux, bords de section inclinés, boutons en forme de flèche et bulles de dialogue peuvent tous être réalisés sans images ni balisage supplémentaire. Écrire à la main les coordonnées d'un polygone est cependant fastidieux. Ce générateur vous offre un aperçu en direct avec des poignées déplaçables, pour façonner l'élément et copier la déclaration finale.
Polygones, cercles, ellipses et insets
L'outil prend en charge les principales fonctions de formes de base. polygon() accepte une liste de points exprimés en pourcentages x et y, idéale pour les triangles, trapèzes, étoiles et flèches. circle() et ellipse() acceptent un rayon et une position de centre, et inset() rogne vers l'intérieur depuis chaque bord de la boîte, avec un rayon d'angle arrondi facultatif. Choisissez un préréglage comme point de départ, puis affinez-le. Pour les polygones, faites glisser n'importe quelle poignée pour déplacer un sommet, ou placez le focus sur une poignée et utilisez les touches fléchées pour des pas précis d'un pour cent, en maintenant Maj pour des sauts plus grands.
Conseils pour utiliser clip-path
Comme toutes les valeurs sont en pourcentages, la forme suit la taille de l'élément, ce qui la rend parfaitement adaptée aux mises en page responsives. N'oubliez pas que clip-path n'affecte que le rendu : les bordures et les ombres portées situées hors de la forme sont elles aussi rognées ; utilisez donc un élément enveloppant avec filter: drop-shadow() si vous avez besoin d'une ombre qui suit la forme. Vous pouvez aussi animer la transition entre deux polygones ayant le même nombre de points à l'aide de transitions CSS, pour des effets de morphing fluides. Le code généré tient sur une seule ligne à coller dans n'importe quelle feuille de style, et toute l'édition se fait localement dans votre navigateur.
Comment utiliser
- Choisir un préréglagePartez d'une forme comme un triangle, un hexagone, une étoile, une flèche, un cercle ou un rectangle en retrait.
- Modifier la formeFaites glisser les poignées du polygone, ou utilisez les curseurs pour les formes cercle, ellipse et inset.
- Ajouter ou supprimer des pointsSélectionnez un point, puis ajoutez-en un autre après lui ou supprimez-le pour affiner le polygone.
- Copier le CSSCopiez la déclaration clip-path et appliquez-la à n'importe quel élément.