css - 创建带 Angular 线性渐变

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>

或掩码

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

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

---

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

.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(-5deg);
  transform-origin: right;
  background: linear-gradient(to right, #007bff, #0C4078);
}

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