Générateur de CSS clip-path

CSS clip-path accepte une fonction polygon() composée d’un nombre quelconque de paires de coordonnées x/y, ce qui permet de sculpter un bloc bien au-delà des simples rectangles et cercles auxquels on se limite souvent. Saisir ces coordonnées à la main est fastidieux et presque impossible à obtenir correctement pour autre chose qu’un triangle basique — ce générateur transforme cette liste de coordonnées en un ensemble de points déplaçables sur un aperçu en direct, pour que la forme que vous voyez soit toujours celle que le CSS produit.

Chaque point de l’aperçu est stocké en pourcentage de la largeur et de la hauteur du bloc, exactement comme clip-path: polygon() fonctionne en interne : une forme construite ainsi conserve ses proportions exactes quelle que soit la taille finale de l’élément dans une vraie page, d’un petit masque d’icône à une bannière pleine largeur. Faites glisser n’importe quel point pour remodeler le contour, cliquez près d’un bord pour ajouter un nouveau point à l’endroit exact du clic, ou double-cliquez sur un point existant pour le supprimer — l’éditeur conserve toujours au moins trois points, car un polygone ne peut exister avec moins.

Les six préréglages inclus sont choisis pour prouver que clip-path peut faire plus que des formes convexes : l’étoile et la flèche utilisent toutes deux des angles rentrants pointant vers l’intérieur, la bulle de dialogue découpe une queue triangulaire dans un rectangle autrement ordinaire, et le ticket à encoche creuse deux encoches sur des bords opposés, comme un vrai ticket perforé. Chargez n’importe quel préréglage et continuez à le modifier — rien dans l’éditeur ne vous enferme dans la forme de départ.

Importez votre propre image pour prévisualiser le clip-path sur un contenu réel plutôt que sur un bloc uni, ou ignorez cette étape : l’aperçu bascule sur un motif rayé pour que la forme découpée reste nettement visible dans les deux cas. Comme tous les outils de ce site, tout fonctionne en local dans le navigateur : aucune image ne quitte votre appareil, et le générateur continue de fonctionner hors ligne une fois la page chargée.