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

Question

假设从500px方div开始，我希望实现此结果：

我试过了transform: skew，但看起来它只在一侧扭曲div，但我希望获得这个透视图，好像这个div正好在你身边

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

有什么建议吗？谢谢

Answer 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/

Answer 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;
}