Wie erstelle ich mit CSS Radial-Gradient eine transparente geschwungene Form mit abgerundeten Seiten?

Transparente geschwungene CSS-Form mit zwei abgerundeten Seiten

Das Erstellen einer geschwungenen, transparenten Form kann eine Herausforderung sein, insbesondere wenn Sie eine Rundung wünschen Seiten. In diesem Artikel werden wir eine Lösung mit Radialgradienten untersuchen.

Erster Versuch

Zunächst haben Sie versucht, eine gekrümmte Form mithilfe einer Kombination aus absoluter Positionierung und zu erstellen ein gekrümmter Randradius. Der Hintergrund blieb jedoch undurchsichtig, sodass die blaue Hintergrundfarbe nicht durchscheinen konnte.

Lösung mit Radial-Gradient

Eine bessere Lösung ist die Verwendung von Radial-Gradient zum Erstellen die Illusion einer transparenten, geschwungenen Form. Mit dem Radialgradienten können Sie einen Farbverlauf definieren, der an einem bestimmten Punkt beginnt und nach außen strahlt.

Das CSS:

.box {
  width: 200px;
  height: 100px;
  background: white;
}
.box .top {
  height: 100px;
  width: 150px;
  transform: translateY(-100%);
  background: #fff;
  position: relative;
}

.top:before,
.top:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  left: 100%;
  bottom: 50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%, transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%, #fff 100%) left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

.top:after {
  transform-origin: bottom;
  transform: scaleY(-1);
}

Erklärung

Das .box-Element dient als Container für die geschwungene Form. Darin wird das .top-Element absolut positioniert und nach oben verschoben (-100 %), um die Form zu erstellen.

Das .top-Element verfügt über zwei Pseudoelemente (::before und ::after), die die Form erstellen Kurveneffekt mit Radialgradient. Diese Pseudoelemente werden in der oberen linken und unteren rechten Ecke des .top-Elements mit einer Breite von 50 Pixel positioniert.

Die radialen Farbverläufe sind so definiert, dass sie von oben links und unten beginnen. jeweils rechte Ecke. Der erste Farbverlauf erzeugt einen weißen (undurchsichtigen) Abschnitt auf der rechten Seite, der 2 % oberhalb der Unterkante in den transparenten Bereich übergeht. Der zweite Farbverlauf bewirkt das Gegenteil und erzeugt links einen transparenten Abschnitt und unten einen weißen Abschnitt.

Durch die Kombination dieser Farbverläufe entsteht die Illusion einer transparenten, geschwungenen Form.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS Radial-Gradient eine transparente geschwungene Form mit abgerundeten Seiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!