How to draw a gradient colored trapezoid with css3?

Tags: html,css,css3

Problem :

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.


Solution :

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

    CSS Howto..

    How to make a ccs transition only forward

    How to change the font size in table cells according to cells content?

    jQuery (1.8.1/1.8.2), Internet Explorer 8: How to remove css attribute transparent?

    How to make CSS animation happen the moment the website loads

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    How to resize trapezoid in CSS when browser window resize

    How can I remove the spacing above a block element in CSS?

    Leaflet for R: How to change default CSS cluster classes

    In CSS, how to make the colored background be at least 50% of pagewidth and at most 90%, and as wide as necessary?

    How to achieve a photo “stack” border effect with CSS?

    How to align text in the following way using css / html?

    How to make SpriteSpin responsive?

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How to center field_with_errors class

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    How to make more divs appear when hovering over one div?

    CSS how to target element beside my current element?

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How to resize in
    with float:left?

    How to vertical align icon inside label and button in the same way

    How to include .otf in css?

    How can I reduce the space between two elements in CSS?

    How to use background css for an image not in the Content or Resource folder

    How to find class =“class1” included class=“class2” in CSS? [closed]

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How to change css for an element but keep defaults for it's children

    How to alter CSS properties using PHP based on a conditional

    How do you align text of one item in nav?

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    How to center text inside a div element? [duplicate]