Creating a trapezium in CSS and/or HTML

Question

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?

Is this what you are looking for? http://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3 — Jonathan Strate, Nov 19 '13 at 15:50
Does it have to be a "factory" which generates those shapes? If not, look at my answer. This will create just one example. — ksu, Nov 19 '13 at 16:02
Caught up in something right now...but will do share...I have done this before — Ani, Nov 19 '13 at 16:21
I guess people are going sane for shapes, please read my comment here http://stackoverflow.com/questions/20069723/how-to-transform-each-side-of-a-shape-separately-using-css#comment29895918_20069723 — Mr. Alien, Nov 19 '13 at 17:44

Ani · Answer 1 · 2013-11-19T17:53:59.567

Okay..Sorry for being late. Here's my answer:

Fiddle: http://jsfiddle.net/fELER/1/

CSS:

#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 200px solid yellow; 
   border-left: 100px solid transparent; 
   border-right: 100px solid transparent; 
}

#right-triangle {
   position:absolute;
   top: 10px;
   left:175px;
   width: 50px; 
   height: 100px; 
   border-style: solid;
   border-width: 100px 0 0 300px; 
   border-color: transparent transparent transparent yellow;
   -webkit-transform: skew(29deg); 
   -moz-transform: skew(29deg); 
   -o-transform: skew(29deg);
   transform: skew(29deg);
}

HTML:

<div id="up-triangle"></div>
<div id="right-triangle"></div>

Some useful links: http://www.css3shapes.com/

http://apps.eky.hk/css-triangle-generator/

score 1 · Accepted Answer · answered Nov 19 '13 at 16:00

1

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/

answered Nov 19 '13 at 16:00

ksu

608
4
11

That's awesome... is there also any way of creating a border radius on the angles? – Tom Nov 19 '13 at 16:07
ok, this is described here: http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas – ksu Nov 19 '13 at 16:15

score 0 · Answer 3 · answered Nov 19 '13 at 15:51

0

#box {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

CSS trapezoid

answered Nov 19 '13 at 15:51

Žarko Selak

1,073
12
19

I'm looking for a trapezium (no parallel sides). Thanks – Tom Nov 19 '13 at 15:52

Creating a trapezium in CSS and/or HTML

3 Answers3