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.

1]



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


    CSS Howto..

    How to add slide animation when showing elements

    How to automatically resize a div based on background image size?

    How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?

    How to change css on multiple elements

    How to specify size of thumbnails for photos that are hosted externally?

    How to use css and images to create a rounded header section in an HTML page?

    How to add a scrollbar to an HTML5 table?

    How to configure simple_form to show validation status

    How to add CSS files for different platform devices? [closed]

    How to make css notifications without jQuery? [closed]

    How to use 3-digit color codes rather than 6-digit color codes in CSS?

    How to use Bootstrap Glyphicons in Holder.js images

    Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

    Showing images next to paragraph

    How to apply global styles with CSS modules in a react app?

    How to use nth-child with :hover to style multiple children?

    How to add percentage-of-height top/bottom margin in CSS

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    how to set the font-family like a digital clock CSS? [closed]

    How do I place a
    beside an image?

    How to change visibility of a div css to visible with jQuery

    How can I make a different CSS for the first child
    ?

    How do I style the asp.net membership control with css?

    How to handle CSS code in my Android email app?

    How do you make a filter for images that have tags?

    Show Feed in two columns in HTML

    How to hide sliding div with css

    How to create multi-column data entry form using CSS in Asp.Net?

    How to add different CSS3 hover transitions on hover out with CSS

    How to center absolutely positioned elements in css for a pdf