Générateur de clip-path

Comment ça marche

clip-path découpe un élément selon un contour. Tout ce qui est en dehors de la forme n'est ni dessiné ni cliquable, ce qui en fait une vraie forme plutôt que l'image d'une forme, et cela fonctionne sur n'importe quel élément, y compris les images et les vidéos.

Des pourcentages, pas des pixels

Les points d'un polygone sont donnés en pourcentages de la largeur et de la hauteur propres à l'élément, si bien que la forme s'étire avec l'élément au lieu de se déformer à une autre taille. C'est ce qui la rend utilisable dans une mise en page adaptative.

Les clics suivent la forme

C'est ce qui distingue clip-path d'une superposition décorative. La zone découpée ne reçoit aucun événement de pointeur, donc un bouton triangulaire est triangulaire pour la souris comme pour l'œil.

Animer d'une forme à l'autre

Un polygone ne peut se transformer en douceur en un autre polygone que si les deux listent le même nombre de points. L'astuce habituelle consiste à compléter la forme la plus simple avec des points en double pour que les nombres correspondent§: un triangle écrit avec quatre points dont deux au même endroit peut se transformer en carré.

La ligne -webkit-

Les navigateurs actuels n'ont besoin que de la propriété sans préfixe. La copie préfixée est incluse parce que certaines anciennes versions de Safari l'exigent encore et qu'il ne coûte rien de la laisser.

Ce qu'il ne fait pas

Il découpe§; il ne remet pas en page. Le texte autour continue de traiter l'élément comme son rectangle d'origine. Pour que le texte épouse une forme, il vous faut shape-outside, qui utilise la même syntaxe.