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 supérieure arrondie intérieure, 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 asymétrique qui sert de base à la bordure supérieure arrondie intérieure. 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, on obtient 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 permet nous pour créer un élément réactif avec à la fois une forme inclinée et une bordure intérieure arrondie 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!