Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich in CSS ein schiefes Element mit einem inneren abgerundeten Rand?

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

Linda Hamilton
Linda HamiltonOriginal
2024-10-31 00:58:29106Durchsuche

How to Create a Skewed Element with an Inner Rounded Border in CSS?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn