如何使用CSS的div三角形的顶部和底部？

Question

现在我得到这样的：

其三个资料核实。顶部的第一个是三角形，中心的一个是没有任何形状的正常DIV，第三个，底部是三角形。所有的形状都是通过CSS形成的（边框透明）

我想将三个DIV合并成一个，而不会丢失整个构造的形状。这可能吗？

这是我的HTML代码：

<div id="triangle1"></div> /* triangle at the top */ 
<div id="center"> 
<p>Text Text Text</p> 
<div id="triangle2"></div> /* triangle at the bottom */ 

这里是CSS-代码：

#center { 
    background-color: #E0E0E0; 
    position: absolute; 
    width: auto; 
    height: auto; 
    top: 100px; 
    left: 20%; 
    right: 20%; 
    text-align: justify; 
    padding-left: 3%; 
    padding-right: 3%; 
} 

#triangle1 { 
    width: 0; 
    height: 0; 
    top: 20px; 
    border-style: solid; 
    border-width: 0 1143px 80px 0px; 
    border-color: transparent transparent #E0E0E0 transparent; 
    left: 20%; 
    right: 20%; 
    position: absolute; 
} 

#triangle2 { 
    width: 0; 
    height: 0; 
    top: 312px; 
    border-style: solid; 
    border-width: 80px 0 0 1152px; 
    border-color: #E0E0E0 transparent transparent transparent; 
    left: 20%; 
    right: 20%; 
    position: absolute; 
} 

我想＃triangle1的代码和＃triangle2到#center没有结合失去了它现在的外观（如截图所示）。 但是如何？

谢谢你到目前为止。

Answer 1

You could use CSS transforms to accomplish this.

transform: skewY(3deg); 

转化亲本具有副作用，其后代（段落与文本）也将倾斜。一个简单的解决办法是扭转后代元素的转换。

Here is a quick demo。

You might need to add browser-specific prefixes旧的浏览器：

-moz-transform: skewY(3deg); 
-webkit-transform: skewY(3deg); 
-o-transform: skewY(3deg); 
-ms-transform: skewY(3deg); 
transform: skewY(3deg);