CSS-Element verzerren und inneren abgerundeten Rand oben erzielen

Im Webdesign kann es eine Herausforderung sein, komplexe grafische Elemente präzise und reaktionsschnell zu reproduzieren mit CSS. Eine solche Herausforderung besteht darin, ein schiefes Element mit einem inneren abgerundeten Rand oben zu erstellen.

Definieren der HTML-Struktur

Zuerst definieren wir die HTML-Struktur:

Implementieren des CSS

Um das Element zu neigen und den inneren abgerundeten Rand oben hinzuzufügen, verwenden wir das folgende 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%);
}

Dieses CSS erstellt ein schräges Element, das als Basis für den inneren abgerundeten Rand oben dient. Das :before-Pseudoelement füllt den blauen Bereich mit einer abgerundeten Ecke aus, während das :after-Pseudoelement den radialen Verlaufseffekt hinzufügt, um den inneren Rand zu erstellen.

Kombination von Skew und Inner Border

Durch die Kombination des schrägen Elements und des Innenrandes erzielen wir den gewünschten Effekt:

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

Diese Methode ermöglicht es uns, ein responsives Element mit sowohl einer schrägen Form als auch einem inneren abgerundeten Rand oben zu erstellen, ohne dass mehrere Elemente erforderlich sind. Dieser Ansatz bietet mehr Flexibilität und einfache Implementierung.