Liviu Costache Liviu Costache - 2 months ago 28
CSS Question

How to draw a gradient colored trapezoid with css3?

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.

1]

Answer

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>