首頁 > web前端 > css教學 > 如何使用 CSS Radial-gradient 建立帶有圓邊的透明曲線形狀?

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

Patricia Arquette
發布: 2024-12-10 16:45:14
原創
452 人瀏覽過

How to Create a Transparent Curved Shape with Rounded Sides Using 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板