How could I apply a linear-gradient to an element in css?

Issue

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?

Solution

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>

Answered By – A Haworth

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0