Wie erstelle ich in CSS ein schiefes Element mit einem inneren abgerundeten Rand?

Ein Element mit einem inneren abgerundeten Rand neigen

Sie möchten ein grafisches Design mit CSS reproduzieren, das ein schräges Element mit einem enthält innerer abgerundeter Rand. Während Sie eine statische Version mit zwei Elementen erstellt haben, stehen Sie vor der Herausforderung, sie responsiv zu gestalten.

Um diesen Effekt zu erzielen, verwenden wir ein einzelnes Element:

<code class="css">.header {
  border-top: 20px solid blue;
  height: 100px;
  position: relative;
  overflow: hidden;
}</code>

Dann Fügen Sie ein :before- und :after-Pseudoelement hinzu, um die schräge Form zu erstellen:

<code class="css">.header:before,
.header:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}</code>

Um den inneren abgerundeten Rand zu gestalten, passen Sie das :before-Pseudoelement an:

<code class="css">.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}</code>

Zuletzt , fügen Sie den Farbverlauf für die innere abgerundete Ecke unten rechts hinzu:

<code class="css">.header:after {
  height: 20px;
  width: 20px;
  margin-left: -1px;
  background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

Dieser Ansatz kombiniert die Funktionalität der beiden Elemente in einem einzigen Element und ermöglicht so eine einfachere Reaktionsfähigkeit.

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