html - CSS 三色调对 Angular 线背景

Question

我正在尝试创建一个 3 色背景，颜色沿对 Angular 线方向变化。

我在这里找到了一个我喜欢的颜色的好例子:Responsive Diagonal Two-Tone Backgrounds with CSS (Corner to Corner)

.btn {
  background:#212531;
  background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
  
  display:inline-block;
  padding:0.75em 2.0em;
  font-size:1.5em;
  text-align:center;
  margin:0.25em 0;
  color:#ffffff;
  font-weight:normal;
  text-transform:uppercase;
  font-family:sans-serif;
}

.btn:hover, .btn:focus {
  background:#2d3d64;
  background: linear-gradient(to right bottom, #415382 50%, #2d3d64 50%);
}



body { text-align:center; background:#e6e9f6; padding-top:1.0em; }
a { text-decoration:none; }

<a class="btn" href="#">Check Out My Background</a>

我想将此示例修改为具有第三种颜色，从左下角沿对 Angular 线向上到达屏幕中间，然后停在那里。

我怎样才能做到这一点？

Answer 1

您可以像下面这样尝试。只需考虑具有对 Angular 线方向的额外梯度。

.box {
  width:200px;
  height:100px;
  background:
    linear-gradient(to bottom left ,transparent 50%,yellow 50.5%),
    linear-gradient(to bottom right,red         50%,blue   50.5%);
}

<div class="box">
</div>