Search code examples
htmlcsscss-shapes

How to draw a trapezium/trapezoid with css3?

When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page.

I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me.

Solution

  • You can use some CSS like this:

    #trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
    <div id="trapezoid"></div>

    It is really cool to make all this shapes, Take a look to more nice shapes at:

    http://css-tricks.com/examples/ShapesOfCSS/

    EDIT: This css is applied to a DIV element