Design · utilitaire Local
CSS Clip Path Generator
Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.
Parcours de la tâche / de l'entrée au résultat
Choisir une forme
S'exécute en local · Rien n'est téléversé
Comparez quatre formes polygonales, puis reproduisez les réglages dans l'espace de travail. Chaque aperçu utilise le même polygone que son CSS ; la boîte de départ exportée fait 240 × 180 px.
Ajuster ces réglages dans l'espace de travailUtilisez un hexagone pour un avatar d'équipe ou un badge répété.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}Essayez un losange incliné pour une petite image ou un accent décoratif.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}Utilisez une forme inclinée à quatre sommets pour habiller une carte.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}Orientez le bord d'une bannière vers la section suivante.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}Partez du CSS de l'une des formes ci-dessus, puis ajoutez ces règles à la suite. Remplacez le chemin de l'image et le texte alternatif par les vôtres. La boîte garde un ratio 4:3 ; object-fit: cover recadre l'image pour la remplir sans la déformer. Les coordonnées en pourcentage suivent la boîte quand elle change de taille.
<img class="clipped-shape"
src="/your-image.jpg"
alt="Décrivez votre image"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}Quatre gabarits et deux curseurs sont disponibles. L'édition libre de sommets, l'import de chemins SVG et les courbes ne sont pas pris en charge. Pour copier ou télécharger une règle personnalisée, utilisez Copier le CSS ou Télécharger en .css dans l'espace de travail.
Parcours de la tâche / de l'entrée au résultat
Choisissez hexagone, losange, parallélogramme ou chevron. Deux curseurs ajustent la forme initiale ; modifier un sommet active le polygone personnalisé.
Faites glisser un sommet numéroté ou saisissez ses coordonnées. Les flèches déplacent le sommet ciblé de 1 %, Maj + flèche de 10 %. Ajouter insère un point au milieu du segment suivant.
L’exemple complet contient la couleur choisie, une largeur de 240px et un ratio 4:3. L’éditeur s’adapte à l’écran.
Vérifiez chaque bord avant l’export. Les poignées numérotées servent uniquement à l’édition et ne figurent pas dans le CSS.
Sortie CSS: Déclaration clip-path seule / Exemple CSS complet. L’exemple complet contient la couleur choisie, une largeur de 240px et un ratio 4:3. L’éditeur s’adapte à l’écran.
Les coordonnées en pourcentage suivent la taille de l’élément. Collez la déclaration dans une règle ou utilisez .clipped-shape. Vérifiez sur ordinateur et mobile.
Générateur de clip-path CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.
S'exécute dans l'onglet actuel du navigateur.
Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.
Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.
Effacez l'onglet et les données de travail actives disparaissent.
Lors d’un essai local le 2026-09-24, partez de l’Hexagone par défaut (horizontal 24 %, vertical 50 %). Sélectionnez le point 1, passez X de 24 % à 30 % et choisissez #ff6600. L’aperçu devient un polygone orange à six sommets avec clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%) ; les cinq autres points gardent leur ordre.
Le CSS complet utilise .clipped-shape avec une largeur de 240px, un ratio 4 / 3, un fond #ff6600, -webkit-clip-path et clip-path. La copie CSS correspondait au fichier téléchargé toolars-clip-path.css (240 octets). En mode déclaration seule, la copie donnait exactement clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 octets UTF-8). Vérifiez la découpe dans votre propre mise en page.
Réglez X du point 1 sur 101 %. Le 2026-09-24, l’outil a signalé que les coordonnées doivent être finies et comprises entre 0 et 100 % ; aperçu et CSS ont disparu, copie et téléchargement étaient désactivés. Remettez X à 30 % pour retrouver polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%). Les arêtes croisées ne sont pas corrigées automatiquement.
Partez de quatre formes prédéfinies, ajoutez, supprimez ou déplacez les sommets. Exportez une déclaration clip-path ou un exemple CSS complet. Les coordonnées en pourcentage suivent la taille de l’élément. Collez la déclaration dans une règle ou utilisez .clipped-shape. Vérifiez sur ordinateur et mobile.
Questions fréquentes