Wie positioniere ich mithilfe von CSS eine Ausschnittskurve oben auf einem Hintergrund?

So positionieren Sie eine Ausschnittskurve auf einem Hintergrund

Das Ziel besteht darin, den bereitgestellten CSS-Code zu ändern, um die Ausschnittskurve zu positionieren ( .top) oben im Hintergrund (.box), statt auf der rechten Seite.

CSS-Code-Erklärung:

Im Originalcode ist die .top Das Element wird mithilfe von transform:translateY(-100 %) relativ zu seiner übergeordneten .box positioniert. Dadurch wird es effektiv unter dem Hintergrund platziert.

Um die Kurve nach oben zu verschieben, müssen wir:

1. den oberen Rand des .box-Containers anpassen, um darüber Platz zu schaffen .
2. Positionieren Sie das .top-Element mithilfe von Pseudoelementen neu, um die Kurve oben zu erstellen.

Überarbeiteter CSS-Code:

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

So funktioniert es:

• Der .box-Container hat jetzt einen oberen Rand von 90 Pixeln und bietet darüber Platz für die Ausschnittskurve.
• Der Das .top-Element wird entfernt und zwei Pseudoelemente werden unterhalb des .box-Containers erstellt.
• Diese Pseudoelemente verwenden Farbverläufe, um die Kurvenform zu erstellen.
• transform-origin:right und transform :scaleX(-1) werden auf dem zweiten Pseudoelement verwendet, um die Kurve horizontal zu spiegeln.

Durch die Implementierung dieser Änderungen wird die ausgeschnittene Kurve nun wie gewünscht über dem Hintergrund positioniert.

Das obige ist der detaillierte Inhalt vonWie positioniere ich mithilfe von CSS eine Ausschnittskurve oben auf einem Hintergrund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!