Heim > Artikel > Web-Frontend > 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:
Ü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:
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!