如何在css中应用线性渐变元素?

Question

我有以下代码:

#trapezoid {
border-bottom: 150px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 30px;
}

<div id='trapezoid'></div>

我的问题是我如何应用线性梯度到它(整个形状)。

Background:linear-gradient将不会工作，因为我使用边界来构建形状。

我可以用什么技巧吗?

感谢p。这不是这个答案的重复:

如何用CSS创建多色边框?

Answer 1

可以使用CSS clip-path创建一个梯形。这样你就可以将背景图像设置为线性渐变。

.trapezoid {
width: 20vmin;
height: 40vmin;
clip-path: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
background-image: linear-gradient(red, blue);
}

<div class="trapezoid"></div>

Answer 2

这是一个SVG梯形，它有一个背景线性渐变，也可以旋转。

@keyframes rotating {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.shape {
animation: rotating 2s linear infinite;
}

<svg viewBox="0 0 30 20" class="shape" style="width:300px">
<defs>
<linearGradient id="grad" x2="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="black"/>
</linearGradient>
</defs>

<polygon points="0, 0, 30, 0, 22, 20, 8, 20" fill="url(#grad)"/>
</svg>