两个渐变，两个不同的部分，只有一个div元素

Question

我想知道是否可以创建一个背景效果，如下图只使用一个div 。

我知道如何使用两个div来实现它，但是我的情况会让它变得非常容易，如果它可以在一个div中完成（也许使用：after ???）。渐变的代码是：

.bg-green {
    background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}

.bg-red {
    background-image: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%; 
}

谢谢：）

Answer 1

是的，可以使用带有：pseudo-element的单个div。

您可以做的是将第二个linear-gradient添加到其:after：伪元素。请注意使用rgba(r, b, g, a)而不是十六进制颜色。这样，您可以通过更改其alpha值来控制第二个linear-gradient的不透明度。

body, html {
  height: 100%;
  margin: 0;
}
div {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(110deg, #5EDC29 45%, #FF0058 45%, #FF0058 100%);
  z-index: -1;
}
div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}

<div></div>

---

如果您想要在问题中发布完全相同的渐变颜色，则需要clipPath。

body {
  background: #222222;
  margin: 0;
}
.bg {
  width: 500px;
  height: 300px;
  background: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%);
}
.bg-2 {
  position: absolute;
  width: 500px;
  height: 300px;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}

<svg width="500" height="300">
  <defs>
    <clipPath id="shape">
      <path d="M300,0 L501,0 L501,301 L175,301z" />
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#shape)" width="500" height="300">
    <div class="bg"></div>
  </foreignObject>
</svg>
<div class="bg-2"></div>

Answer 2

你可以得到这个效果，但是你需要在div上设置隐藏的溢出并在after伪类中设置背景

.test {
    width: 400px;
    height: 300px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
}

.test:after {
    content: "";
    position: absolute;
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
    background-image: linear-gradient(-210deg, #95D428 0%, #20560B 100%), linear-gradient(-210deg, #F5515F 0%, #8E0A1E 100%);
    background-position: top left, top right;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    -webkit-transform: rotate(30deg);
}

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

旋转后旋转以获得倾斜分离。尺寸需要更大，以免显示缺角。

然后，将2个线性渐变分配为2个单独的背景图像，再倾斜30度以补偿基础倾角