如何使用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);