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

现在我知道了：

它有三个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 */

我想将#triangle1和#triangle2的代码合并到#center中，而不会失去它现在的外观（如屏幕截图所示）。 但是怎么做呢

非常感谢您。

转换父项会产生副作用，其子项（带文本的段落）也会发生倾斜。一个简单的修复方法是在子元素上反转转换

对于较旧的浏览器：

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

transform: skewY(3deg);

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