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

Définissons d'abord la structure HTML :

Implémentation du CSS

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

.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%);
}

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, nous obtenons l'effet souhaité :

.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%);
}

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