我可以用 css 变换获得这个形状吗？答案

【问题标题】：can i obtain this shape with css transform?我可以用 css 变换获得这个形状吗？
【发布时间】：2014-08-21 21:18:49
【问题描述】：

想象从500px 正方形div 开始，我想达到这个结果：

我试过transform: skew，但看起来它只在一侧倾斜了 div，但我想获得这个视角，好像这个div 正向你袭来

这是一些测试的小提琴：http://jsfiddle.net/kf6oow6f/

有什么建议吗？谢谢

【问题讨论】：

看这里css-tricks.com/examples/ShapesOfCSS向下滚动到“梯形”
谢谢！！这就是我一直在寻找的
类似问题：stackoverflow.com/questions/23177903/…

标签： html css transform css-shapes

【解决方案1】：

body{
    perspective: 50em;
}
div {
    width: 500px;
    height: 500px;
    background:black;
    transform:rotateX(60deg);
    margin:100px auto;
}

演示：http://jsfiddle.net/kf6oow6f/2/

perspective 属性应位于 div 的父级上，在此演示中为 body。 50em 的值可以根据需要进行调整。

另请注意（与之前的答案不同），使用此transform 允许您插入同样失真的内容。演示：http://jsfiddle.net/kf6oow6f/3/

【讨论】：

gillesc 的答案更符合我的要求
“使用此转换允许您插入同样扭曲的内容。”这是需要的:)

【解决方案2】：

在这里，可以在这个很好的 CSS 形状参考链接上找到：http://css-tricks.com/examples/ShapesOfCSS/

小演示：http://jsfiddle.net/e7m2gbqz/

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

【讨论】：