如何用css3绘制梯形/梯形？

Question

当您使用 Mobile Safari 转到页面 http://m.google.com 时，您会在页面顶部看到漂亮的栏。

我想像那样画一些梯形（美国：梯形），但我不知道怎么画。我应该使用 css3 3d 转换吗？如果您有实现它的好方法，请告诉我。

原文由 Stackoverflow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以像这样使用一些 CSS：

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

 <div id="trapezoid"></div>

制作所有这些形状真的很酷，看看更多漂亮的形状：

http://css-tricks.com/examples/ShapesOfCSS/

编辑：此 css 应用于 DIV 元素

原文由 ElHacker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于现在已经很老了，我觉得它可以与一些新技术一起使用一些新的更新答案。

CSS 转换透视

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

帆布

 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>

原文由 Stewartside 发布，翻译遵循 CC BY-SA 3.0 许可协议