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

Question

现在我明白了：

它的三个DIV。顶部的第一个是三角形，中心的一个是没有任何形状的普通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);