将渐变应用于倾斜的 div

Question

我使用以下CSS来制作梯形形状的div，使用了带有角度边框的CSS技巧：

#slopedDiv {
  position: absolute;
  height: 0;
  width: 100px;
  border-style: solid;
  border-color: #DC0714 transparent;
  border-width: 248px 125px 0 0;
}

<div id="slopedDiv"></div>

是否可以将垂直线性渐变应用于生成的形状？我已经尝试使用border-image，但是这只会导致它失去角度，就我所能做到的而言。

- ajor

---

我倾向于这个，希望有人能找到解决方案！ - ZombieChowder

不值得回答，但很有趣：渐变+混合模式在哪里适用... http://codepen.io/gc-nomade/pen/aJGmxo - G-Cyrillus

Answer 1

一种选择是在伪元素上使用skew()而不是像这样使用边框技巧：

#slopedDiv {
  width: 200px;
  overflow: hidden;
}

#slopedDiv:before {
  content: "";
  display: block;
  height:100px;
  background: linear-gradient(to right, rgba(11, 11, 87, 1) 0%, rgba(150, 66, 87, 1) 100%);
  transform:skew(-25deg) translateX(-50px)
}

<div id="slopedDiv"></div>

带有文本的倾斜div

#slopedDiv {
  width: 200px;
  overflow: hidden;
}

#slopedDiv div {
  background: linear-gradient(to right, rgba(11, 11, 87, 1) 0%, rgba(150, 66, 87, 1) 100%);
  transform: skew(-25deg) translateX(-50px);
}

#slopedDiv h2 {
  color: white;
  letter-spacing:2px;
  padding: 25px 30px;
  transform: skew(25deg) translateX(50px);
}

<div id="slopedDiv">
  <div>
    <h2>My Title Here</h2>
  </div>
</div>

- DaniP

---

我喜欢这个 - 做得很好！ - NickyTheWrench

谢谢 @NickyTheWrench :) - DaniP

Answer 2

如果 div 后面的背景颜色已知，您可以在元素的背景上使用 2 个渐变实现此效果。一个是将被看到的渐变，另一个是对角线渐变，隐藏了它（在本例中为白色）。

.test {
  width: 400px;
  height: 300px;
  background-image: linear-gradient(-71deg, white 100px, transparent 100px), linear-gradient(to bottom, green, yellow, blue);
}

<div class="test"></div>

- vals

Answer 3

有一种方法可以实现边框图像渐变，如下所示：

https://css-tricks.com/examples/GradientBorder/

从我的测试来看，这在高度为0时不起作用。您只能使用伪类来实现这一点，我认为您将无法仅通过0高度的div上的边框使用渐变+梯形。

- Noah Kiss

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。-【来自审查】 - Tom

@thebluefox 我尝试了几种不同的方法来将必要的部分嵌入到这里，但是它们都无法与他的应用程序配合使用，所以我只是留下了替代信息以及他的方式行不通的原因。该链接并没有回答问题，而是提供了另一种选择。 - Noah Kiss