I have the following code:
#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 will not going to work since I use border to construct the shape.
Any trick I could use?
Thanks
P.S this is not a duplicate of this answer:
You can create a trapezoid using CSS clip-path. That way you can set the background-image to a linear-gradient.
.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>Here's an SVG trapezoid that has a background linear gradient and also rotates.
@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>