如何使用 CSS Radial-gradient 建立帶有圓邊的透明曲線形狀？

具有兩個圓形邊的CSS 透明彎曲形狀

創建彎曲的透明形狀可能是一個挑戰，尤其是當您想要圓形時雙方。在本文中，我們將探索使用徑向漸層的解決方案。

初始嘗試

最初，您嘗試結合絕對定位和彎曲的邊界半徑。然而，背景仍然不透明，導致藍色背景顏色無法顯示。

使用 Radial-gradient 的解決方案

更好的解決方案是使用 Radial-gradient 來創造透明、彎曲形狀的錯覺。 Radial-gradient 可讓您定義從特定點開始向外輻射的漸層。

CSS:

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

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

說明

.box 元素用作彎曲形狀的容器。在其中，.top 元素絕對定位並向上平移 (-100%) 以建立形狀。

.top 元素有兩個偽元素（::before 和 ::after），用於創建形狀使用徑向漸變的彎曲效果。這些偽元素位於 .top 元素的左上角和右下角，寬度為 50px。

徑向漸層定義為從左上角和下角開始分別是右角。第一個漸層在右側創建一個白色（不透明）部分，在底部邊緣上方 2% 處漸變為透明。第二個漸變則相反，在左側建立一個透明部分，在底部建立一個白色部分。

透過組合這些漸變，創造出透明彎曲形狀的幻覺。

以上是如何使用 CSS Radial-gradient 建立帶有圓邊的透明曲線形狀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！