How to draw a trapezium/trapezoid with css3?

Question

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.

Answer 1

As this is quite old now, I feel it could use with some new updated answers with some new technologies.

CSS Transform Perspective

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

<div class="trapezoid"></div>

SVG

<svg viewBox="0 0 20 20" width="20%">
  <path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>

Canvas

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();

<canvas id="myCanvas" width="200" height="200"></canvas>

Answer 2

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

Answer 3

Simple way

To draw any shape, you can use the CSS clip-path property like below.

You can use free online editors to generate this code (ex: https://bennettfeely.com/clippy/)

.trapezoid {
    clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}

With reusable code

If you want it more adaptative, you can define a Sass mixin like :

@mixin trapezoid ($top-width, $bottom-width, $height) {
    $width: max($top-width, $bottom-width);
    $half-width-diff: abs($top-width - $bottom-width) / 2;

    $top-left-x: 0;
    $top-right-x: 0;
    $bottom-left-x: 0;
    $bottom-right-x: 0;

    @if ($top-width > $bottom-width) {
        $top-left-x: 0;
        $top-right-x: $top-width;
        $bottom-left-x: $half-width-diff;
        $bottom-right-x: $top-width - $half-width-diff;
    } @else {
        $top-left-x: $half-width-diff;
        $top-right-x: $bottom-width - $half-width-diff;
        $bottom-left-x: 0;
        $bottom-right-x: $bottom-width;
    }

    clip-path: polygon($top-left-x 0, $top-right-x 0, $bottom-right-x $height, $bottom-left-x $height);
    
    width: $width;
    height: $height;
}

And then use it for the desired element like this (here parameters are $top-width, $bottom-width, $height) :

.my-div {
    @include trapezoid(8rem, 6rem, 2rem);
}

Answer 4

This is an old question... but I want to add a method that has not been mentioned. It is possible to draw triangles with gradients of half color half transparent, and then it is possible to build a trapezoid from 3 gradient shapes. Here is an example code, the 3 blocks drawed in different colors for better understanding:

#example {
    width: 250px;
    height: 100px;
    background-image:
        linear-gradient(to top left, red 0 50%, transparent 50% 100%),
        linear-gradient(to top right, green 0 50%, transparent 50% 100%),
        linear-gradient(blue 0 100%);
    background-size:
        20% 100%, 20% 100%, 60% 100%;
    background-position:
        left top, right top, center top;
    background-repeat: no-repeat;
}

<div id="example"></div>

Answer 5

You have a few options available to you. You can just plain use an image, draw something with svg or distort a regular div with css transforms. An image would be easiest, and would work across all browsers. Drawing in svg is a bit more complex and is not guaranteed to work across the board.

Using css transforms on the other hand would mean you'd have to have your shape divs in the background, then layer the actual text over them in another element to that the text isn't skewed as well. Again, browser support isn't guaranteed.