Wie erstelle ich mithilfe von CSS ein schiefes Element mit einem inneren abgerundeten Rand oben?

CSS-Element verzerren und inneren abgerundeten Rand oben erreichen

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

HTML-Struktur definieren

Zuerst definieren wir die HTML-Struktur:

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

Implementieren des CSS

Um das Element zu neigen und den inneren abgerundeten Rand oben hinzuzufügen, verwenden wir das folgende CSS:

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

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

Kombination von Schräge und innerem Rand

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

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

Mit dieser Methode können wir ein ansprechendes Element mit sowohl einer schrägen Form als auch einer inneren Rundung erstellen Rand oben, ohne dass mehrere Elemente erforderlich sind. Dieser Ansatz bietet mehr Flexibilität und einfache Implementierung.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS ein schiefes Element mit einem inneren abgerundeten Rand oben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!