创建一个带角度的线性渐变

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>