CSS3旋轉梯度

Question

像這樣的漸變對於純CSS3是可能的嗎？我還沒有找到創造「漩渦」的方法。

Answer 1

我有原型使用箱陰影：

.box { 
 
    width: 500px; 
 
    height:200px; 
 
    background: linear-gradient(to right, #50bcf3 , #60ec94); 
 
    overflow: hidden; 
 
} 
 

 
.box:before, .box:after { 
 
    content: ""; 
 
    height: 100%; 
 
    width: 200px; 
 
    display: block; 
 
    position: relative; 
 
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; 
 

 
} 
 

 
.box:before { 
 
    left: 200px; 
 
    top: 100px; 
 
    box-shadow: -30px 0 40px -10px #60ec94; 
 
    transform: skewX(-10deg); 
 
} 
 

 
.box:after { 
 
    left: 200px; 
 
    top: -300px; 
 
    transform: skewX(-10deg); 
 
    box-shadow: inset -40px 0 70px -30px #60ec94; 
 
}

<div class="box"></div>

Answer 2

如果你設定一個類似的風格，並應用了一些透明度僞元素，我認爲你可以實現你的要求

.test { 
 
    height: 400px; 
 
    width: 400px; 
 
    position: relative; 
 
    border-top-left-radius: 180px 250px; 
 
    margin: 100px 200px; 
 
    box-shadow: -15px -15px 60px -20px lightgreen, 
 
    inset 10px 10px 15px -10px lightblue; 
 
}

<div class="test"></div>