如何用css3绘制梯形/梯形？ [英] How to draw a trapezium/trapezoid with css3?

问题描述

使用移动Safari访问 http://m.google.com 页面时，您会看到页面顶部的美丽的酒吧。

When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page.

我想画一些梯形（美国：梯形），但我不知道如何。我应该使用css3 3d变换吗？

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.

推荐答案

你可以使用这样的CSS：

You can use some CSS like this:

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

使所有这些形状真的很酷，看看更好形状为：

It is really cool to make all this shapes, Take a look to more nice shapes at:

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

编辑：
此css适用于DIV元素

This css is applied to a DIV element

这篇关于如何用css3绘制梯形/梯形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！