Comment créer un élément asymétrique avec une bordure intérieure arrondie en utilisant CSS ?

Incliner l'élément CSS et obtenir une bordure intérieure arrondie en haut

Dans la conception Web, il peut être difficile de reproduire des éléments graphiques complexes avec précision et réactivité en utilisant CSS. L'un de ces défis consiste à créer un élément asymétrique avec une bordure intérieure arrondie en haut.

Définir la structure HTML

Tout d'abord, définissons la structure HTML :

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

Implémentation du CSS

Pour incliner l'élément et ajouter la bordure intérieure arrondie en haut, nous utiliserons le CSS suivant :

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

Ce CSS crée un élément incliné qui sert de base à la bordure intérieure arrondie. Le pseudo-élément :before remplit la zone bleue avec un coin arrondi, tandis que le pseudo-élément :after ajoute l'effet de dégradé radial pour créer la bordure intérieure.

Combinaison de l'inclinaison et de la bordure intérieure

En combinant l'élément asymétrique et la bordure intérieure, nous obtenons l'effet souhaité :

<code class="css">.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

Cette méthode nous permet de créer un élément réactif avec à la fois une forme inclinée et un arrondi intérieur bordure supérieure sans avoir besoin de plusieurs éléments. Cette approche offre une plus grande flexibilité et facilité de mise en œuvre.

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!