Comment faire des coins personnalisés en CSS ?

Article écrit par Victor Darras

Aujourd’hui, j’aimerais aborder un sujet assez léger, comment faire des coins personnalisés avec CSS.

Vous connaissez maintenant tous (je vous le souhaite) la propriété CSS border-radius qui permet de faire des coins arrondis à nos éléments HTML. Très simple à utiliser, et assez révolutionnaire à l’époque de sa sortie, elle a permis à tout intégrateur de faire proprement ce que nous faisions avec divers hacks depuis des années. Nous insérions nos éléments dans des tableaux HTML pour coller des images aux 4 coins… je ne vous raconte pas l’enfer pour maintenir le HTML.

Bien que relativement limitée en possibilités, cette propriété permet tout de même quelques fantaisies de ce genre :

C’est sympa, mais on ne va pas très loin avec ce genre de blob difforme. Je vous parlais plus tôt de pouvoir faire spécifiquement des « coins » personnalisés (rien à voir avec la confiture).

Une solution maintenant éprouvée utilise la propriété clip-path. Il est possible de lui passer un ensemble de valeurs et notamment des fonctions comme elipse ou circle mais celle qui nous intéresse aujourd’hui est polygon(). Polygon prend autant d’arguments qu’on le souhaite, chaque valeur est constituée d’une paire de coordonnées, qui se réfère au haut/gauche du bloc concerné.

.el {   clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0 10%); } 

L’usage des pourcentages est pratique et rapide, mais ne répond qu’à très peu de besoins et est directement corrélé au ratio et à la taille du bloc concerné.

Il serait plus malin d’utiliser la méthode calc(). Ainsi, nous pouvons utiliser une valeur fixe (2em dans cet exemple) :

.el {   clip-path: polygon(2em 0, calc(100% - 2em) 0, 100% 2em, 100% calc(100% - 2em), calc(100% - 2em) 100%, 2em 100%, 0% calc(100% - 2em), 0 2em); } 

La valeur de propriété devenant quelque peu verbeuse ; je vous propose de l’associer à une variable CSS. Ça ne sera pas moins verbeux, mais bien plus facile à éditer à l’avenir !

.el {   --corner: 2em;   clip-path: polygon(     var(--corner) 0, calc(100% - var(--corner)) 0,     100% var(--corner), 100% calc(100% - var(--corner)),     calc(100% - var(--corner)) 100%, var(--corner) 100%,     0% calc(100% - var(--corner)), 0 var(--corner)   ); } 

On peut aller encore plus loin ! Voyez plutôt :

.el {   --c: 1em;   --nc: calc(100% - var(--c));   clip-path: polygon(     0 var(--c), var(--c) var(--c), var(--c) 0,     var(--nc) 0, var(--nc) var(--c), 100% var(--c),     100% var(--nc), var(--nc) var(--nc), var(--nc) 100%,     var(--c) 100%, var(--c) var(--nc), 0 var(--nc)   ); } 

Je vous l’accorde, ça commence à devenir relativement illisible, mais je vous autorise à le copier-coller pour vos propres créations.

Un bémol avec cette solution, c’est qu’elle ne vous permettra pas de définir de box-shadow à notre nouvelle forme puisqu’elle est, elle aussi, croppée par le clip-path. En revanche, le survol (:hover) est lui bien limité à la forme définie. Ce qui permet quelques originalités comme dans l’exemple qui suit ; Pour des formes plus complexes, vous aurez aussi la possibilité d’utiliser des SVG comme nous avions pu le faire il y a quelques années avec ce jeu en CSS, mais attention il vous faudra avoir des formes de taille fixes.