Comment puis-je obtenir des effets de rayon de bordure « inversé » en CSS ?

Alternatives au Border-Radius « inversé »

Bien que la propriété border-radius native de CSS n'autorise pas les valeurs négatives, il existe des solutions de contournement et des approches alternatives pour obtenir des effets similaires.

Solution CSS :

Une approche consiste à créer des éléments supplémentaires dans le conteneur, à définir leur arrière-plan pour qu'il corresponde à l'arrière-plan de la page et à les positionner. les juste à l'extérieur de l'élément principal. Ensuite, appliquez un rayon de bordure aux éléments extérieurs pour créer l'effet perçu de coins inversés.

Voici un extrait CSS démontrant cette technique :

<code class="css">#main {
  margin: 40px;
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden;
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

Approche basée sur une bibliothèque :

Si vous le souhaitez, vous pouvez utiliser des bibliothèques externes spécialement conçues pour gérer cette fonctionnalité, telles que :

• [negative-border-radius](https://github. com/filamentgroup/negative-border-radius)
• [Courbes de bordure](https://github.com/4dreplay/border-curves)
• [css-corners](https:/ /github.com/jonschlinkert/css-corners)

Ces bibliothèques étendent généralement les capacités CSS et fournissent des options supplémentaires pour personnaliser les effets de bordure, y compris les coins inversés.

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!