如何用css3繪制漸變色梯形？

Question

我需要像圖像一樣制作一個梯形，但我不知道如何。

我正在嘗試使用以下css但我被卡住了：

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

如果你有一個很好的方法來實現使用它，請告訴我。

Answer 1

看看這個：

 #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

留下陰影和漸變給你。 請享用。

 #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>