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

CSS-Skew-Element und Erreichen eines inneren abgerundeten Randes oben

Das Erreichen eines responsiven Designs beim Replizieren eines grafischen Designs in CSS kann eine Herausforderung darstellen, insbesondere wenn Umgang mit Elementen wie schiefen Formen und inneren abgerundeten Rändern. In diesem Artikel gehen wir auf ein spezielles Problem ein, bei dem ein Benutzer ein Element mit einer Neigung von -40 Grad und einem inneren abgerundeten Rand erstellen möchte, der sich wie ein schlüsselförmiger Knopf um das Element legt.

Original-HTML und CSS

Der bereitgestellte HTML-Code besteht aus einem einfachen

mit einem

Element:

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

Das entsprechende CSS enthält:

<code class="css">body > header > nav {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100vw;
  height: 90px;
  padding: 10px 0;
  text-align: center;
  z-index: 1
}
body > header > nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80vw; height: 100%;
  background-color: rgb(147, 147, 147);
  border-bottom-right-radius: 15px;
  transform: skew(-40deg);
  transform-origin: 100% 0%;
}
body > header > nav::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28.7%;
  border-top: 7px solid rgb(147, 147, 147);
  border-left: 50px solid rgb(147, 147, 147);
  height: 75px;
  border-top-left-radius: 75px;
  transform: skew(-33deg);
}</code>

Dieser Ansatz verwendet zwei Elemente, um die schräge Form und den inneren Rand zu simulieren. Der Benutzer sucht jedoch nach einer einfacheren Lösung, die den Bedarf an mehreren Elementen eliminiert.

Alternativer Ansatz mit einem einzelnen Element

Um ein klareres und reaktionsfähigeres Design zu erreichen, Wir können ein einzelnes Element mit dem folgenden HTML und CSS verwenden:

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

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

Bei diesem Ansatz:

• Das .header-Element dient als einzelnes Element mit einem blauen fester oberer Rand, Höhe 100 Pixel und relative Positionierung.
• Die :before- und :after-Pseudoelemente erzeugen die schräge Form bzw. den inneren abgerundeten Rand.
• Die Skew-Transformation wird angewendet auf beide Pseudoelemente.
• Das :before-Pseudoelement bildet die blau gefärbte schräge Hauptform mit einem Randradius unten rechts von 20 Pixel.
• Das :after-Pseudoelement erstellt die innere abgerundeter Rand, der für einen nahtlosen Übergang leicht nach links positioniert ist.

Diese Methode ermöglicht ein responsives Design, da das Element seine Größe und Form automatisch an das Ansichtsfenster anpassen kann. Darüber hinaus erzeugt die Verwendung eines Verlaufshintergrunds auf dem :after-Pseudoelement einen glatten inneren Randeffekt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit einem einzelnen Element 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!