Générateur de chemin de clip CSS

CSS clip-path accepte une fonction polygon() composée d'un nombre quelconque de paires de coordonnées x/y, ce qui signifie qu'elle peut sculpter une boîte en formes bien au-delà des simples rectangles et cercles que la plupart des gens recherchent. Le problème est que saisir ces coordonnées à la main est fastidieux et presque impossible à obtenir pour quoi que ce soit au-delà d'un triangle de base - ce générateur transforme cette liste de coordonnées en un ensemble de points déplaçables sur un aperçu en direct, de sorte que la forme que vous voyez est toujours la forme produite par le CSS.

Chaque point de l'aperçu est stocké sous forme de pourcentage de la largeur et de la hauteur de la boîte, ce qui correspond exactement à la façon dont clip-path: polygon() lui-même fonctionne sous le capot : une forme construite de cette façon conserve ses proportions correctes, quelle que soit la taille de l'élément dans une page réelle, d'un petit masque d'icône à une bannière de héros pleine largeur. Faites glisser n'importe quel point pour remodeler le contour, cliquez près d'un bord pour ajouter un nouveau point exactement à l'endroit où vous avez cliqué ou double-cliquez sur un point existant pour le supprimer. L'éditeur conserve toujours au moins trois points, car un polygone ne peut pas exister avec moins.

Les six préréglages groupés sont choisis pour prouver que le chemin de clip peut faire plus que des formes convexes : l'étoile et la flèche s'appuient toutes deux sur des angles réflexes qui pointent vers l'intérieur, la bulle sculpte une queue triangulaire dans un rectangle par ailleurs simple, et les talons de ticket creusent deux encoches dans des bords opposés à la manière d'un vrai ticket perforé. Chargez n'importe quel préréglage et continuez à faire glisser à partir de là - rien dans l'éditeur ne vous verrouille dans la forme de départ.

Téléchargez votre propre image pour prévisualiser le chemin du clip par rapport au contenu réel au lieu d'une boîte simple, ou ignorez complètement le téléchargement et l'aperçu revient à un motif rayé afin que la forme coupée reste clairement visible dans les deux cas. Comme tous les outils de ce site, le tout s'exécute localement dans le navigateur : aucune image ne quitte jamais votre appareil et le générateur continue de fonctionner hors ligne une fois la page chargée.