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

Question

我需要像图像一样制作一个梯形，但我不知道如何。

我正在尝试使用以下css，但我被卡住了：

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

如果您有一个很好的方法来实现使用CSS，请告诉我。

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

将阴影和渐变留给你。享受。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;