如何使用 CSS 或 SVG 建立具有兩個圓邊的透明曲線形狀？

使用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);
}

在此程式碼中，創建了兩個:before 和:after偽元素以形成形狀的圓形側面。徑向漸變允許透明和不透明區域之間逐漸過渡，從而產生彎曲形狀的錯覺。

使用SVG 的替代解決方案

或者，您可以利用SVG（可縮放向量圖形）來定義彎曲形狀：

<svg width="200" height="100" viewbox="0 0 200 100">
  <defs>
    <mask></mask></defs></svg>

在此SVG 程式碼中，定義路徑來建立形狀，並將遮罩應用於矩形以僅顯示形狀的所需部分。

結論

利用 CSS Radial -漸變或SVG，您可以實現所需的透明內彎曲形狀，具有兩個圓角邊。這些方法之間的選擇取決於您的首選方法和設計的複雜性。

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