具有兩個圓形邊的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中文網其他相關文章！
