创建带角度的线性渐变

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>

或mask

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

创建带角度的线性渐变

Creating a linear gradient with an angle

css

linear-gradients