Tool Hub

Générateur CSS clip-path

Glisser les poignées polygon → code polygon()

Formes

4 points

Point #1

Editor (drag handles)

Preview

CSS
clip-path: polygon(50.0% 0.0%, 100.0% 50.0%, 50.0% 100.0%, 0.0% 50.0%);

Comment utiliser

  1. Sélectionnez une forme préréglée ou commencez par le polygone par défaut dans l'éditeur SVG.
  2. Faites glisser les poignées circulaires pour repositionner chaque sommet du polygone.
  3. Ajoutez un nouveau point (inséré au point médian du bord sélectionné) ou supprimez le point sélectionné.
  4. Affinez les pourcentages X/Y exacts dans les entrées de coordonnées.
  5. Copiez le clip-path CSS généré et collez-le dans votre feuille de style.

Exemples

  • Faire glisser une poignée de triangle à 50% 0%, 0% 100%, 100% 100% produit clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%).
  • Ajouter un point sur le bord droit d'un rectangle et le tirer vers l'extérieur crée une forme de flèche en temps réel.

Vérifiez les sorties avant utilisation en production. Aucune garantie — voir Conditions.