Comment puis-je créer des coins arrondis inégaux sur une division à l'aide de CSS ?

Côtés arrondis inégaux sur un div : réaliser une asymétrie avec CSS

La création de côtés arrondis inégaux sur un div nécessite une approche différente de l'utilisation du rayon de bordure. Bien que border-radius permette une courbure égale de tous les côtés, nous explorerons une solution alternative qui accorde un contrôle plus précis sur la forme.

Présentation de clip-path, une propriété CSS qui vous permet de découper la forme d'un élément en fonction de paramètres spécifiques. Cette propriété fonctionne en dessinant des formes géométriques autour d'un élément, masquant efficacement toutes les parties qui se trouvent en dehors de la forme définie.

Exemple de code

Le code suivant montre comment créer un div avec des côtés arrondis inégaux en utilisant clip-path :

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

<div class="box">

</div>

Explication

Dans le CSS code :

• circle(75% at 65% 10%) définit la forme comme un cercle avec un rayon de 75% de la hauteur et de la largeur du div.
• Le mot-clé at spécifie la position du centre du cercle à 65 % de la gauche et 10 % du bas.
• Cela crée un cercle qui ne chevauche que partiellement le div, ce qui donne les côtés arrondis asymétriques souhaités.

Cette solution offre une plus grande flexibilité et vous permet de créer une large gamme de formes non symétriques pour vos divs.

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!