Comment puis-je créer des divisions avec des coins inégalement arrondis à l'aide de CSS ?

Créer des divisions avec des côtés arrondis inégaux

Bien que l'utilisation du rayon de bordure puisse fournir des coins arrondis à une div, obtenir des côtés inégaux nécessite une approche différente . Une solution efficace consiste à utiliser la propriété clip-path.

Utiliser clip-path

clip-path vous permet de découper une forme spécifique d'un élément, en masquant efficacement la zone excédentaire. Pour créer des côtés arrondis inégaux, utilisez une forme de cercle dont le centre est décalé par rapport aux bords du div. Par exemple :

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);
}

Ce code CSS définit une "boîte" avec des côtés arrondis inégaux :

• La forme du cercle a un rayon de 75 %, mais son centre est décalé de 65 % horizontalement et 10 % verticalement à partir du coin supérieur gauche du div.
• Le fond "bleu" remplit tout le div, mais seulement le La zone à l'intérieur de la forme du cercle est visible.

En manipulant les valeurs de circle(), vous pouvez affiner la forme et la position des coins arrondis. Cette approche fournit une méthode flexible pour créer des côtés arrondis personnalisés sur des divs, vous permettant de réaliser des conceptions comme l'exemple que vous avez fourni.

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!