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

Question

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

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

Answer 1

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

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>

Canvas

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>