CSS 线性渐变三角形中的颜色过渡

Question

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

我想要实现的是每个三角形的颜色过渡：

在三角形ABD中：粉色从左到右变深
在三角形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

您可以在定义线性渐变位置后使用更多颜色，因此您可以执行以下操作：

background: linear-gradient(to left bottom, deeppink 0%, pink 50%, blue 50%,midnightblue 100%);

检查你的updated fiddle

Answer 2

我对您的代码进行了相当多的修改。我添加了两个新元素作为背景。可能不是您正在寻找的解决方案，但在我的脑海中，这就是有效的方法。

Fiddle

.background-wrapper {
  position: relative;
  width: 600px;
  height: 250px;
  color: #FFFFFF;
  padding: 20px 50px 80px 50px;
  overflow: hidden;
}
.triangle {
  position: absolute;
  top: -65%;
  right: -30%;
  width: 125%;
  height: 125%;
  transform: rotate(26.5deg);
  background: linear-gradient(to right, pink, #f44274);
}
.triangle.bottom {
  top: initial;
  right: initial;
  left: -30%;
  bottom: -64.8%;
  background: linear-gradient(to right, blue, navy);
}

<div class="background-wrapper">
  <div class="triangle top"></div>
  <div class="triangle bottom"></div>
</div>

Answer 3

.background-wrapper {
  position: relative;
  width: 800px;
  height: 450px;
  background: #ffffff;
/* Old Browsers */background: -moz-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
 /* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, #ffffff), color-stop(49%, #6176ff), color-stop(50%, #ff80d9), color-stop(100%, #ffffff));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
 /* IE 10+ */background: linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

你可以在渐变中指定角度。试试上面的代码。它适用于宽度和高度。

Answer 4

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

使用混合模式时效果更好，但支持度较低。

.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>

CSS 线性渐变三角形中的颜色过渡

CSS color transition in triangles with linear gradient

html

css

background-color

linear-gradients