Le CSS « ​​clip-path » peut-il arrondir seulement trois coins gauches d'une forme ?

Comment arrondir trois coins gauches uniquement à l'aide d'un chemin de clip CSS

La création de formes à l'aide d'un chemin de clip CSS peut être un moyen polyvalent de réaliser diverses conceptions. Cependant, arrondir des angles spécifiques peut s’avérer difficile. Cet article aborde le problème de l'arrondi des trois coins les plus à gauche d'une forme personnalisée.

Problème :
Considérez le code HTML et CSS suivant :

<div></div>

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

Ce code crée une forme avec des coins gauches pointus et des coins droits arrondis. Pour arrondir spécifiquement uniquement les trois coins les plus à gauche, nous devons modifier la propriété clip-path.

Solution :
Pour obtenir l'effet souhaité, nous pouvons utiliser l'insert() fonction avec la propriété round :

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

La fonction inset() nous permet de spécifier le pourcentage de la forme à masquer dans chaque direction, et la propriété round crée des bords arrondis. En fournissant un rayon de 10 px à la propriété round, nous arrondissons les coins supérieur gauche, inférieur gauche et inférieur central.

Cette solution créera efficacement une forme avec les trois coins arrondis les plus à gauche tout en préservant les coins droits pointus. .

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!