如何使用 CSS 將剪切曲線放置在背景頂部？

如何在背景頂部放置剪切曲線

目標是修改提供的CSS 程式碼以定位剪切曲線（.top）位於背景（.box）的頂部，而不是右側。

CSS程式碼說明：

在原始程式碼中，.top使用translate:translateY(-100%) 相對於其父.box 定位元素。這有效地將其放置在背景下方。

要將曲線移到頂部，我們需要：

1. 調整.box 容器的頂部邊距以在其上方創建空間.
2. 使用偽元素重新定位.top 元素以在頂部建立曲線。

修訂的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;
}

工作原理：

.top 元素被移除，並在 .box 容器下方建立兩個偽元素。

這些偽元素使用漸層來建立曲線形狀。

transform-origin:right 和 transform :scaleX(-1) 用於第二個偽元素以水平翻轉曲線。

透過實施這些更改，剪切曲線現在將根據需要定位在背景頂部。

以上是如何使用 CSS 將剪切曲線放置在背景頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！