如何使用 CSS 創建帶有圓邊的透明曲線形狀？

在CSS 中創建帶有圓邊的透明曲線形狀

在CSS 中創建曲線形狀可能具有挑戰性，尤其是在追求透明度時。本文探討了一種使用 CSS 來實現此目的的方法，解決了不透明背景的問題。

挑戰：

您可能會遇到一種場景，您希望創建一個類似於所提供圖像中描繪的透明彎曲形狀。但是，您目前使用傳統 CSS 技術的方法會導致背景不透明，如結果螢幕截圖所示。

解：

為了解決此問題，我們提出涉及徑向梯度的解。透過策略性地利用兩個徑向漸變，我們可以創造出帶有圓邊的透明彎曲形狀的幻覺。

實作：

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}

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

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

body {
  background:pink;
}

在此程式碼片段中，「.top」元素表示彎曲形狀。位於該元素之前和之後的徑向漸層創建了圓形側面和透明度。 'transform:scaleY(-1)' 屬性垂直翻轉後偽元素，建立對稱形狀。

改進的實現：

對於更多用戶-調整曲線的友好方式，請考慮使用https://css-shape.com/inner-curve/提供的解決方案。這個網站允許您自訂曲線形狀的各個方面，輕鬆達到您想要的效果。

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