创建具有角度的线性渐变

Question

我的设计规范要求像这样的渐变

我想出了如何做斜线和颜色偏移的方法，但是在相同的线性渐变属性下却很难做到。

background: linear-gradient(90deg, #007bff, #0C4078); // color is right 
background: linear-gradient(178deg, white 50%, white 50%, #007bff 50%, #007bff 40%); // line angle is right

如何使线性渐变看起来像规格？

Answer 1

您需要考虑多个背景：

.box {
 height:200px;
 background: 
   linear-gradient(to bottom right,#fff 49%,transparent 50%) top/100% 30%,
   linear-gradient(to right, #007bff, #0C4078);
 background-repeat:no-repeat;
}

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

如果需要透明度，可以在一个背景下使用clip-path：

.box {
 height:200px;
 background:linear-gradient(to right, #007bff, #0C4078);
 -webkit-clip-path:polygon(0 30%,0 100%, 100% 100%,100% 0);
 clip-path:polygon(0 30%,0 100%, 100% 100%,100% 0);
}

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

如果您想要透明度和比clip-path更好的支持，这是另一种方法：

.box {
  height: 200px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: skewY(-7deg);
  transform-origin: top right;
  background: linear-gradient(to right, #007bff, #0C4078);
}

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