如何用css3绘制渐变色梯形？

Question

I need to make a trapezoid like in image, but I don't know how.

I'm trying to do it with the following css but I'm stuck:

#trapezoid {
    width: 100px;
    height: 0;
    border-top: 50px solid #82E81B;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
}

If you have a good method to achieve using CSS it please tell me.

Answer 1

look this:

 #div1 { position: relative; height: 150px; width: 50px; margin: 50px; padding: 0px; -webkit-perspective: 150px; /* Chrome, Safari, Opera */ perspective: 200px; } #div2 { padding: 40px 70px; position: absolute; border-radius:2px; -webkit-transform: rotateY(-30deg); /* Chrome, Safari, Opera */ transform: rotateY(-30deg); box-shadow:3px 0px 6px rgb(19,83,60),inset 1px 1px 2px 2px rgba(241,251,50,1); background-image:-webkit-linear-gradient(to right, #b7f915, #b7f915,#6fd00c); background-image:linear-gradient(to right,#b7f915,#b7f915, #6fd00c); } 

 <div id="div1"> <div id="div2"></div> </div> 

Answer 2

Leaving the shadow and gradient to you. Enjoy.

 #trapezoid { border-top: 50px solid #82E81B; border-left: 0px solid transparent; border-right: 30px solid transparent; height: 30px; background: transparent; width: 100px; perspective-origin: 0% 50%; transform: perspective( 600px ) rotateY( -45deg ); position: relative; } 

 <div id="trapezoid"></div>