Wie kann ich mit CSS transparente geschwungene Formen mit abgerundeten Seiten erstellen?

Transparente geschwungene Formen mit abgerundeten Seiten in CSS erstellen

Die Erstellung geschwungener Formen in CSS kann eine Herausforderung sein, insbesondere wenn Transparenz angestrebt wird. Dieser Artikel untersucht eine Methode, um dies mithilfe von CSS zu erreichen, und geht dabei auf das Problem intransparenter Hintergründe ein.

Die Herausforderung:

Möglicherweise stoßen Sie auf ein Szenario, in dem Sie möchten Erstellen Sie eine transparente, geschwungene Form, ähnlich der im bereitgestellten Bild. Ihr aktueller Ansatz mit herkömmlichen CSS-Techniken führt jedoch zu einem undurchsichtigen Hintergrund, wie im Ergebnis-Screenshot zu sehen ist.

Die Lösung:

Um dieses Problem zu beheben, präsentieren wir eine Lösung mit radialem Gradienten. Durch die Verwendung zweier strategisch positionierter radialer Farbverläufe können wir die Illusion einer transparenten, geschwungenen Form mit abgerundeten Seiten erzeugen.

Implementierung:

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}

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

.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);
}

body {
  background:pink;
}

In diesem Codeausschnitt , das „.top“-Element stellt die geschwungene Form dar. Die vor und nach diesem Element positionierten radialen Farbverläufe erzeugen die abgerundeten Seiten und die Transparenz. Die Eigenschaft „transform: scaleY(-1)“ dreht das hintere Pseudoelement vertikal um und erzeugt so die symmetrische Form.

Verbesserte Implementierung:

Für eine benutzerfreundlichere Um die Kurve auf eine benutzerfreundlichere Weise anzupassen, sollten Sie die von https://css-shape.com/inner-curve/ bereitgestellte Lösung verwenden. Auf dieser Website können Sie verschiedene Aspekte der Kurvenform anpassen und so ganz einfach den gewünschten Effekt erzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS transparente geschwungene Formen mit abgerundeten Seiten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!