CSS创建此形状仅作为背景，内容保持直接

Question

试图创建一个像下面的小提琴那样的视角倾斜形状并挣扎。到目前为止，我可以正确地工作，但我似乎无法让左下角更像梯形。我发现的最接近的是：How to create fluid trapezoid image with css?但这是用于图像。

代码是：

<div class="we-are"> 
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> 

.we-are { 
background-color: orange; 
height:450px; 
-ms-transform:skewY(10deg); /* IE 9 */ 
-moz-transform:skewY(10deg); /* Firefox */ 
-webkit-transform:skewY(10deg); /* Safari and Chrome */ 
-o-transform:skewY(10deg); /* Opera */ 
transform:skewY(10deg); 
padding:15px; 
} 
.we-are p { 
padding-top: 125px; 
-ms-transform:skewY(-10deg); /* IE 9 */ 
-moz-transform:skewY(-10deg); /* Firefox */ 
-webkit-transform:skewY(-10deg); /* Safari and Chrome */ 
-o-transform:skewY(-10deg); /* Opera */ 
transform:skewY(-10deg); 
} 

当前小提琴是：

http://jsfiddle.net/x6bkbeqc/

感谢

Answer 1

整个事情FO使用perspective和rotateY可以完成梯形形​​状。只是包装所有的东西在div像 -

<div id="persp">...</div> 

，然后使用这个CSS透视施加磁场后，该div

#persp { 
    perspective: 200px; 
} 

（根据您的需要调整200px） 只需旋转你的沿着X，Y或Z轴选择你喜欢的任何一个（随意试验）。

.we-are { 
    transform:rotateY(10deg); 
    perspective: 200px; /* mention this to make the contents of p appear straight */ 
} 
/* and this too */ 
.we-are p { 
    padding-top: 125px; 
    transform: rotateY(-10deg); 
} 

Demo

Answer 2

嗨，你可以在此只需添加这个CSS属性的。我们-是p选择通过化妆达到您预期的结果。

则无需改变高度或宽度或包括

初始关键字用于设置CSS属性为其默认值的其他属性。

参阅本文档Refer

display: initial;

，并在这里，我已经更新了您的演示

Updated Demo