用CSS和/或HTML创建梯形

Question

我发现了大量使用CSS3创建梯形的教程，但我希望创建一个四边形状，其中没有一个边是平行的（梯形），如下图所示。

这可能吗？

Answer 1

好的......抱歉迟到了。这是我的答案：

小提琴：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>

一些有用的链接： http://www.css3shapes.com/

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

Answer 2

你可以“手动”做到这一点 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();

这不会使它变得凸起并且它没有平行线。你必须放入正确的坐标。

小提琴：http://jsfiddle.net/8t4rZ/

Answer 3

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

CSS trapezoid