Creating a trapezium in CSS and/or HTML [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 8 years ago.

Improve this 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.

Is this possible?

Answer 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/

Answer 2

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/

Answer 3

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

CSS trapezoid