Un rognage rectangulaire arrondi
Nantes, le 14 avril 2024.
Une découverte personnelle récente : il est possible de passer un paramètre supplémentaire à la fonction CSS inset() afin d’arrondir les angles du rectangle formé.
Un exemple avec un clip-path sur un élément qui se voit rogné sur ces quatre côtés de 10 pixels :
clip-path: inset(10px round 20px);Exemples de clip path avec ou sans le second paramètre.
Il est bien sûr possible de passer des valeurs multiples si on ne souhaite pas un rognage ou un arrondi identique aux quatre coins :
clip-path: inset(10px 0 0 20px round 20px 60px 0);Exemples de clip path avec les paramètres possédant des valeurs multiples.
Combiné à d’autres propriétés (ou non), ce paramètre permet des effets intéressants :
Vincent.