Search code examples
htmlcsscss-shapes

Creating a trapezium in CSS and/or HTML

I've found plenty of tutorials for creating Trapezoids using CSS3 but I am looking to create a four sided shape where none of the side are parallel (trapezium) like the one in the picture below.

enter image description here

Is this possible?

Solution

  • you could do this "by hand" html:

    <canvas id="polygon" />

    javascript

    var polygon = document.getElementById('polygon').getContext('2d');
polygon.fillStyle = '#f00';
polygon.beginPath();
polygon.moveTo(0, 0);
polygon.lineTo(90,50);
polygon.lineTo(70, 70);
polygon.lineTo(0, 90);
polygon.closePath();
polygon.fill();

    this doesn't make shure it's convex and it has no parallel lines. You have to put in the correct coordinates.

    Fiddle: http://jsfiddle.net/8t4rZ/