Css 生成像图像一样的渐变

如何生成像这样的渐变

这是迄今为止我得到的最接近的结果，但它还不一样：

.background{
位置：相对位置；
背景图像：径向渐变（右上角的圆圈，#ff9bb4，#ff507b，#ff7a2d，#f55a00）；
宽度：100%；
高度：300px；
-webkit变换：歪斜（-1.5度）；
-moz变换：歪斜（-1.5度）；
-ms变换：歪斜（-1.5度）；
-o变换：歪斜（-1.5度）；
变换：歪斜（-1.5度）；
}

---

也许您可以通过分层半透明渐变来实现这一点：

CSS

HTML

---

如果需要，可以使用

transform:rotate（10deg）

而不是歪斜来实现上图中的旋转

要创建渐变，这可能会对您有所帮助：

如果你想有边界，我会设置梯度作为一个div的背景，并按照你想要的方式设置div的边界

创建一支笔：

HTML

---

你试过用

rotate

代替

skew

吗？这对你有帮助，我认为除了skew之外还有一个rotate。（原始图片的角不是90度）。最大的问题不是旋转，而是颜色。而且我认为这不是径向而是2线性渐变

.grad {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}

.outer {
  background: linear-gradient(45deg, rgba(255,83,21,0.21) 0%,rgba(254,55,112,0.87) 100%);
}

.inner {
  background: linear-gradient(45deg, rgba(255,83,21,0.5) 0%,rgba(254,55,112,0.87) 100%); 
}

<div class='outer grad'>
  <div class='inner grad'></div>
</div>

<div class="gradient-wrapper">
<div>

.gradient-wrapper {
  height: 250px;
  width: 500px;
  margin-top: 50px;
  background-image: linear-gradient(to right bottom, #fa9049, #ff8153, 
  #ff7260, #ff656e, #fe597e);
  transform: skewY(-4deg);
 -moz-transform: skewY(-4deg);
 -webkit-transform: skewY(-4deg);
}