2

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>
My question is how could I apply linear-gradient to it (the whole shape).

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:

How to create multi-color border with CSS?

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
James
  • 2,732
  • 2
  • 5
  • 28
  • Use an SVG for this. – Lee Taylor Jun 11 '22 at 22:06
  • @LeeTaylor, I do think about using svg or a combination of transform and perspective to make the shape, but I need to use transform: rotate property afterwards which will not work for me. If you have a way to make trapezoid that could be rotate use svg, I will be very appreicated to see that :) – James Jun 11 '22 at 22:08
  • You are trying to use gradient borders in CSS. To my knowledge there is no simple obvious CSS API for this. You could do linear-gradient background and try to reproduce the same result. – Sanxofon Jun 11 '22 at 22:12

2 Answers2

2

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>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
1

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>
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
  • 1
    Thank you, don't know how svg could do that. (very new to it). Thanks again. Really hope I could accept both two answers – James Jun 11 '22 at 22:19