html - 具有线性渐变的三 Angular 形中的 CSS 颜色过渡

Question

我正在处理一个矩形背景，它被从左上角到右下角的一条线分成 2 个三 Angular 形，如图所示。

我想要实现的是每个三 Angular 形的颜色过渡:

1. 在三 Angular 形ABD中:粉色从左到右变深
2. 在三 Angular 形ACD中:蓝色从左到右变深

注意:宽度和高度不是固定为 600 和 250。我只是为了演示目的使用它们。

HTML代码:

<div class="background-wrapper">
  <p class="float-left">A</p>
  <p class="float-right">B</p>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <p class="float-left">C</p>
  <p class="float-right">D</p>
</div>

CSS 代码:

.background-wrapper {
  position: relative;
  width: 600px;
  height: 250px;
  color: #FFFFFF;
  padding: 20px 50px 80px 50px;
  background: linear-gradient(to left bottom, pink 50%, blue 50%);
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

Demo jsfiddle here

Answer 1

一种跨浏览器但提供水洗颜色的可能性是用一侧为白色而另一侧为黑色的半透明渐变覆盖三 Angular 形。

这种效果在使用混合模式时变得更好，但支持度较低。

.test {
    width: 400px;
  height: 300px;
  background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 40%,
    rgba(255,255,255,0) 60%, rgba(255,255,255,.5)), 
    linear-gradient(to top right, blue 50%, fuchsia 50%);

}

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