Linear gradient not working with div

Question

I am creating trapezoid using following CSS:

 .trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; background: linear-gradient(red, yellow); }

 <div class='trapezoid'></div>

The linear-gradient attribute is not working. I want the trapezoid as shadow ie its color should eventually fade away. Can anyone please help me on this?

Answer 1

You cannot apply gradient in this way as you are using border and your element has a height of 0 so background won't be visible.

Instead you can try to use multiple gradient to create the shape:

 .trapezoid { height: 100px; width: 200px; background: linear-gradient(to bottom left,white 50%,transparent 52%) 100% 0/40px 100% no-repeat, linear-gradient(to bottom right,white 50%,transparent 52%) 0 0/40px 100% no-repeat, linear-gradient(red, yellow); }

 <div class='trapezoid'></div>

Or use clip-path:

 .trapezoid { height: 100px; width: 200px; background: linear-gradient(red, yellow); -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }

 <div class='trapezoid'></div>

Another method with skew and pseudo-element:

 .trapezoid { height: 100px; width: 200px; position: relative; } .trapezoid:before, .trapezoid:after{ content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 60%; background: linear-gradient(red, yellow); transform:skew(20deg); transform-origin:bottom right; } .trapezoid:after { left: 0; transform:skew(-20deg); transform-origin:bottom left; }

 <div class='trapezoid'></div>

Answer 2

Or use a transform on a suitably sized element (or pseudo-element).

 .trapezoid { width: 100px; height: 100px; margin: auto; transform: perspective(100px) rotateX(40deg); background: linear-gradient(red, yellow); }

 <div class='trapezoid'></div>