Comment puis-je créer des coins arrondis inversés en CSS ?

Obtenir des coins arrondis inversés avec CSS

En CSS, vous pouvez définir le coin supérieur gauche d'un élément comme arrondi à l'aide de la bordure- propriété radius-topleft. Cependant, que se passe-t-il si vous souhaitez inverser ce coin, créant ainsi un effet inversé ?

Traditionnellement, inverser les coins arrondis n'était pas réalisable avec le CSS standard. Cependant, les navigateurs modernes introduisent une solution avec la propriété mask-image.

Solution :

Pour inverser un coin arrondi, utilisez mask-image pour définir un dégradé radial qui crée une découpe circulaire.

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

Dans cet exemple, un conteneur avec un fond rouge est masqué avec un dégradé radial qui crée une découpe circulaire de 10 px à le coin supérieur gauche. La zone transparente passe progressivement au noir, couvrant le coin restant.

En utilisant l'image de masque, vous pouvez inverser efficacement les coins arrondis, donnant à vos créations une touche unique et visuellement attrayante.

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!