Maison >interface Web >tutoriel CSS >Comment puis-je créer des coins arrondis à l'aide de CSS Clip-Path ?

Comment puis-je créer des coins arrondis à l'aide de CSS Clip-Path ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-13 19:18:12736parcourir

How Can I Create Rounded Corners Using CSS Clip-Path?

Création de coins arrondis avec CSS Clip-Path

Lorsque vous utilisez un clip-path CSS pour définir des formes complexes, il est possible de créer des coins arrondis . Par exemple, considérons la forme suivante :

<div>
  ...
</div>
div {
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

Cette forme a des coins pointus, mais nous pouvons arrondir les 3 coins les plus à gauche en utilisant la propriété inset avec la valeur round.

clip-path: inset(0% 45% 0% 45% round 10px);

Avec cette modification, les coins spécifiés seront arrondis avec un rayon de 10px. Cette technique est un moyen polyvalent de créer des formes personnalisées avec des coins arrondis en CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn