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

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 2

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 3

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.

Answer 4

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