341 outils gratuits
Outils en ligne
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
Formes CSS visuellement avec aperçu live
La propriété `clip-path` découpe un élément selon une forme : triangle, losange, hexagone, vague, ou n'importe quel polygone. C'est ce qui remplace les images détourées et les astuces de bordures d'autrefois, en restant du CSS, donc redimensionnable et sans requête réseau. Cet outil laisse manipuler les points de la forme et montre le découpage en direct sur un aperçu, avant de rendre la valeur à coller. Les coordonnées sont en pourcentage, ce qui rend la forme indépendante de la taille de l'élément. Tout se passe dans le navigateur.
Non, et c'est un avantage : `clip-path` découpe aussi la zone d'interaction. Un bouton en losange ne réagit pas aux clics sur les coins invisibles, contrairement à une image détourée posée sur un rectangle.
Parce qu'ils suivent la taille de l'élément : la même forme s'adapte du mobile au grand écran sans être recalculée. Des coordonnées en pixels donnent une forme qui se déforme dès que le conteneur change de largeur.
Il est simplement coupé, texte compris. Prévoyez donc du remplissage du côté des angles rentrants, sinon un titre se retrouve tronqué en biais sur les petits écrans. C'est le défaut le plus courant des sections à bord oblique.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr