Html 如何用css3绘制梯形/梯形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7920754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a trapezium/trapezoid with css3?
提问by u967461
When you go to the page http://m.google.comusing Mobile Safari, you will see the beautiful bar on the top of the page.
当您使用 Mobile Safari访问页面http://m.google.com 时，您会在页面顶部看到漂亮的栏。
I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me.
我想画一些这样的梯形（美国：梯形），但我不知道怎么画。我应该使用 css3 3d 变换吗？如果您有实现它的好方法，请告诉我。
回答by Stewartside
As this is quite old now, I feel it could use with some new updated answers with some new technologies.
由于这现在已经很老了，我觉得它可以与一些新技术一起使用一些新的更新答案。
CSS Transform Perspective
CSS 转换视角
.trapezoid {
width: 200px;
height: 200px;
background: red;
transform: perspective(10px) rotateX(1deg);
margin: 50px;
}<div class="trapezoid"></div>SVG
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>回答by ElHacker
You can use some CSS like this:
你可以像这样使用一些 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>It is really cool to make all this shapes, Take a look to more nice shapes at:
制作所有这些形状真的很酷，看看更多漂亮的形状：
http://css-tricks.com/examples/ShapesOfCSS/
http://css-tricks.com/examples/ShapesOfCSS/
EDIT: This css is applied to a DIV element
编辑：此 css 应用于 DIV 元素
回答by Jerry
You have a few options available to you. You can just plain use an image, draw something with svg or distort a regular div with css transforms. An image would be easiest, and would work across all browsers. Drawing in svg is a bit more complex and is not guaranteed to work across the board.
您有几种选择。您可以简单地使用图像，使用 svg 绘制某些内容或使用 css 转换扭曲常规 div。图像将是最简单的，并且适用于所有浏览器。在 svg 中绘制有点复杂，并且不能保证全面工作。
Using css transforms on the other hand would mean you'd have to have your shape divs in the background, then layer the actual text over them in another element to that the text isn't skewed as well. Again, browser support isn't guaranteed.
另一方面，使用 css 转换意味着您必须在背景中放置形状 div，然后将实际文本放在另一个元素中的它们上，以使文本也不会倾斜。同样，不能保证浏览器支持。
