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>

​