Wie kann ich mithilfe von CSS eine ausgeschnittene Oberseite in einen Hintergrund mit gebogener Oberseite umwandeln?

Umwandeln eines Ausschnitts oben in einen gekrümmten oberen Hintergrund

In dieser codebasierten Aufgabe wollen wir einen Ausschnitt auf der rechten Seite eines Blocks in einen umwandeln geschwungene Form, die anmutig auf dem Block sitzt.

Der aktuelle Codeausschnitt beinhaltet eine .box, die ein .top-Element enthält. Während der gewünschte Effekt darin besteht, den Ausschnitt oben zu haben, wird er im Code rechts platziert. Tauchen wir also in die überarbeitete Version ein:

<code class="css">.box {
  margin-top: 90px;
  width: 200px;
  height: 100px;
  background: white;
  position: relative;
}

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

.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}

body {
  background: pink;
}</code>

Wichtige Anpassungen:

• Wir haben den Rand oben in der .box mindestens so eingestellt, dass er übereinstimmt die Höhe der Pseudoelemente, um sicherzustellen, dass der Ausschnitt den Block nicht überlappt.
• Die Pseudoelemente werden jetzt am unteren Rand der .box mit „bottom: 100%“ positioniert.
• Die Die Höhe der Pseudoelemente ist auf 80 Pixel eingestellt, die Sie anpassen können, um die Höhe der Kurve zu steuern.
• Die Hintergrundverläufe wurden geändert, um den gewünschten radialen Effekt zu erzeugen.

Voilà! Sie haben jetzt einen geschwungenen Ausschnitt, der nahtlos von der Oberseite des Blocks ausgeht. Experimentieren Sie ruhig weiter und kreieren Sie eine Kurve, die perfekt zu Ihrem Design passt.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS eine ausgeschnittene Oberseite in einen Hintergrund mit gebogener Oberseite umwandeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!