Comment créer un effet « Rayon de bordure inversé » en CSS ?

Comment obtenir un effet de « rayon de bordure » inversé

Lors de la conception d'un site Web moderne, l'ajout d'éléments stylistiques tels que des onglets ou des barres de navigation peut améliorer l’expérience utilisateur. Un effet souhaité est de créer des onglets avec un « rayon de bordure inversé », où les coins sont arrondis dans une direction qui pointe vers l'extérieur plutôt que vers l'intérieur.

Étant donné que la propriété border-radius native de CSS ne prend pas en charge les valeurs négatives, obtenir cet effet nécessite une approche différente. Une solution consiste à utiliser des éléments supplémentaires dans le conteneur d'onglets, stratégiquement positionnés à l'extérieur de l'onglet lui-même. Ces éléments doivent avoir une couleur d’arrière-plan qui correspond à l’arrière-plan de la page, les cachant essentiellement à la vue. Ensuite, appliquer un rayon de bordure à ces éléments crée l'illusion d'un coin arrondi inversé.

Voici un exemple utilisant du CSS pur :

<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>

<code class="html"><div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div></code>

Cette approche crée un " inversé " effet border-radius" en étendant efficacement les coins arrondis à l'extérieur de la limite de l'onglet. C'est un moyen simple et efficace d'obtenir le style visuel souhaité.

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!