Как нарисовать градиентную цветную трапецию с 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

Оставив тень и градиент к вам. Наслаждаться.

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