CSS Clip Path Generator
24 formes de découpe, paramètres et points de polygone modifiables ; exporter CSS ou une déclaration.
Traitement local
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;
}Cette galerie présente 4 exemples de polygones de base. L’espace de travail propose 24 formes ; les polygones permettent d’ajouter, supprimer et déplacer des sommets, tandis que cercles, ellipses et formes inset utilisent des paramètres. L’import de chemins SVG et l’édition de courbes personnalisées ne sont pas inclus. Utilisez Copier le CSS ou Télécharger en .css dans l’espace de travail pour enregistrer la règle. Les aperçus PNG/JPEG/WebP locaux restent dans cet onglet, sans envoi ni enregistrement. Les proportions ne changent que le recadrage de l’aperçu ; l’image et ces proportions ne figurent pas dans les exports CSS/HTML.
Parcours de la tâche / de l'entrée au résultat
Choisissez parmi 24 formes. Les polygones permettent d’ajouter, supprimer et déplacer des sommets ; cercles, ellipses et formes inset utilisent des paramètres. Exportez une déclaration clip-path ou un exemple CSS complet.
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.
Choisissez une image locale PNG, JPEG ou WebP de 8 Mio, 16 mégapixels et 8192 pixels par côté au maximum. Les 24 formes peuvent être prévisualisées. L’image remplit le cadre avec un recadrage cover ; 4:3, 1:1, 16:9 et 3:4 ne modifient que cet aperçu. L’image n’est ni envoyée ni enregistrée et ne figure pas dans les exports CSS/HTML. L’exemple CSS complet conserve le ratio 4:3. Copiez ou téléchargez le CSS avant de quitter.
Sortie CSS: Déclaration clip-path seule / Exemple CSS complet. 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. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.
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.
Choisissez parmi 24 formes.
Questions fréquentes