具有線性漸變的三角形中的CSS顏色過渡

Question

我正在一個矩形背景上工作，如圖所示，該背景被從左上到右下的一條線分為2個三角形。

我要實現的是每個三角形的顏色過渡：

1. 在三角形ABD中：粉紅色從左到右變暗
2. 在三角形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;
}

在這里演示jsfiddle

Answer 1

一種可能性是跨瀏覽器，但會產生水洗的顏色，它是用半透明漸變覆蓋三角形，該漸變的一側為白色，另一側為黑色。

使用混合模式可獲得更好的效果，但支持較低。

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

Answer 2

定義線性漸變位置后，可以使用更多顏色，因此可以執行以下操作：

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

檢查您更新的小提琴

Answer 3

我從原始代碼中修改了很多代碼。 我添加了兩個新元素作為背景。 可能不是您正在尋找的解決方案，但最重要的是這是行之有效的。

小提琴

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

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

您可以在漸變中指定角度。 試試上面的代碼。 它可以與寬度和高度一起使用。