Comment créer un élément asymétrique avec une bordure intérieure arrondie à l'aide d'un seul élément en CSS ?

CSS incline l'élément et obtient une bordure intérieure arrondie en haut

Réaliser une conception réactive tout en reproduisant une conception graphique en CSS peut présenter des défis, en particulier lorsque traiter des éléments tels que des formes asymétriques et des bordures intérieures arrondies. Dans cet article, nous aborderons un problème spécifique dans lequel un utilisateur cherche à créer un élément avec une inclinaison de -40 degrés et une bordure intérieure arrondie qui entoure l'élément comme un bouton en forme de clé.

HTML et CSS originaux

Le code HTML fourni comprend un simple avec un symbole

element :

<code class="html"><header>
  <nav></nav>
</header></code>

Le CSS correspondant comprend :

<code class="css">body > header > nav {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100vw;
  height: 90px;
  padding: 10px 0;
  text-align: center;
  z-index: 1
}
body > header > nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80vw; height: 100%;
  background-color: rgb(147, 147, 147);
  border-bottom-right-radius: 15px;
  transform: skew(-40deg);
  transform-origin: 100% 0%;
}
body > header > nav::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28.7%;
  border-top: 7px solid rgb(147, 147, 147);
  border-left: 50px solid rgb(147, 147, 147);
  height: 75px;
  border-top-left-radius: 75px;
  transform: skew(-33deg);
}</code>

Cette approche utilise deux éléments pour simuler la forme asymétrique et la bordure intérieure. Cependant, l'utilisateur recherche une solution plus simple qui élimine le besoin de plusieurs éléments.

Approche alternative avec un seul élément

Pour obtenir une conception plus propre et plus réactive, nous pouvons utiliser un seul élément avec le HTML et le CSS suivants :

<code class="html"><div class="header"></div></code>

<code class="css">.header {
  border-top: 20px solid blue;
  height:100px;
  position: relative;
  overflow: hidden;
}

.header:before,
.header:after {
  content: "";
  vertical-align:top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}

.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}

.header:after {
  height: 20px;
  width: 20px;
  margin-left:-1px;
  background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

Dans cette approche :

• L'élément .header sert d'élément unique avec un bleu bordure supérieure solide, hauteur de 100 px et positionnement relatif.
• Les pseudo-éléments :before et :after créent respectivement la forme inclinée et la bordure intérieure arrondie.
• La transformation d'inclinaison est appliquée à les deux pseudo-éléments.
• Le pseudo-élément :before forme la forme asymétrique principale de couleur bleue avec un rayon de bordure en bas à droite de 20px.
• Le pseudo-élément :after crée l'intérieur bordure arrondie, positionnée légèrement vers la gauche pour une transition fluide.

Cette méthode permet une conception réactive car l'élément peut automatiquement ajuster sa taille et sa forme pour s'adapter à la fenêtre d'affichage. De plus, l'utilisation d'un arrière-plan dégradé sur le pseudo-élément :after crée un effet de bordure intérieure lisse.

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!