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.

Mooneyham

You mean the navigation bar? It's an image: google.com/mobile/images/mgc3/mgc-body-toolbar-bg-banner.png – Obligation

Perhaps I'm missing something, but isn't it just a gradient image applied to body tag? If so you could use css3 gradients...I don't know what "trapeziums" means. – Citystate

In the US, we say "trapezoid" for a quadrilateral with one pair of parallel sides, and "trapezium" for a quadrilateral with no parallel sides. Outside the US, "trapezium" = US::"trapezoid", and US::"trapezium" is just "irregular". Knowing is half the battle~ – Anagnos

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

Scuff

thank you very much!!!I had seen this website before but i forgot it last night!I have solved the problem.Really Thank You! – Shandishandie

you're welcome, it is one of my favorite sites, you can find a lot of useful information there. – Scuff

sir, I want responsive trapziod shape. can you tell me anything about it? – Backbend

@Kishan: Check out this answer for responsive trapezoid https://mcmap.net/q/372032/-how-to-resize-trapezoid-in-css-when-browser-window-resize – Averell

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>

Cesaria

first part should be top answer – Antoinette

I like the accepted answer but as where I'm using this INSIDE of a keyframe animation I had to use a css transform which was included in this answer – Ruttger

This also throws a trapezoid box-shadow! – Boucicault

If you don't want to apply the same transformation on text inside the trapezoid, remember to reverse the transformation for the inner element: transform: perspective(10px) rotateX(-1deg); – Simonasimonds

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

Lux

Note that an outer shadow on the div will appear outside the clipping area, thus it won't be visible. – Winfrid

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>

Haematic

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.

Mori