Comment puis-je créer des coins arrondis inégaux sur une division ?

Créer des côtés arrondis inégaux sur une division

Défi : Concevoir une DIV avec les côtés arrondis inégaux suivants :

[Image de DIV avec des arrondis inégaux côtés]

Solution actuelle :

En utilisant le rayon de bordure, l'approximation la plus proche est :

border-bottom-left-radius: 80% 50px;
border-bottom-right-radius: 30% 30px;

Mais cela donne des coins arrondis qui sont aussi uniforme.

Solution :

Clip-Path to the Rescue :

Pour créer les côtés arrondis inégaux souhaités, considérez en utilisant la propriété clip-path, qui permet de définir une forme géométrique qui coupe le contenu d'un élément :

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

Dans ce code :

• 75% définit le rayon du cercle.
• à 65% 10% précise le point central du cercle par rapport au conteneur de l'élément.

Code HTML :

<div class="box">
</div>

La propriété clip-path créera le côtés arrondis inégaux souhaités, offrant la flexibilité nécessaire pour adapter la forme à vos besoins spécifiques.

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!