Html 在剪裁div的内部添加div时，剪裁路径停止工作

我现在正在做一个项目，我试图在

div

的底部有一个

div

。我做得很好，但我还想让

div的两侧成角度。我也能做到。我开始在
div
中添加我想要的东西（底部和有角度的那一个），并且已经添加了一个
div
，但是当我添加另一个时（两者之间没有太大区别），
剪辑路径停止工作！我正在使用HTML和CSS（无引导）

这是我的代码（）：


正文{
背景：黑色；
}
messegeHolder先生{
最高：50%；
-webkit转换：转换（-285px，-185px）；
转换：转换（-285px，-185px）；
左：50%；
宽度：570px；
高度：370px；
位置：固定；
溢出：隐藏；
边界半径：10px；
}
.mainbox{
保证金：0自动；
边缘顶部：10px；
宽度：550px；
高度：350px；
位置：相对位置；
背景：rgba（51,51,51,1）；
背景：moz线性梯度（顶部，rgba（51,51,51,1）0%，rgba（51,51,51,1）45%，rgba（17,17,17,1）90%，rgba（17,17,17,1）100%）；
背景：-webkit渐变（左上、左下、颜色停止（0%，rgba（51,51,51,1））、颜色停止（45%，rgba（51,51,51,1））、颜色停止（90%，rgba（17,17,17,1））、颜色停止（100%，rgba（17,17,17,1））；
背景：webkit线性梯度（顶部，rgba（51,51,51,1）0%，rgba（51,51,51,1）45%，rgba（17,17,17,1）90%，rgba（17,17,17,1）100%）；
背景：-o-线性梯度（顶部，rgba（51,51,51,1）0%，rgba（51,51,51,1）45%，rgba（17,17,17,1）90%，rgba（17,17,1）100%）；
背景：ms线性梯度（顶部，rgba（51,51,51,1）0%，rgba（51,51,51,1）45%，rgba（17,17,17,1）90%，rgba（17,17,17,1）100%）；
背景：线性梯度（底部，rgba（51,51,51,1）0%，rgba（51,51,51,1）45%，rgba（17,17,17,1）90%，rgba（17,17,17,1）100%）；
边框半径：50px；-webkit框阴影：插图0px 5px 50px#000000；
-moz盒阴影：插入0px 0px 50px#000000；
盒影：0px 0px 100px#99999；
溢出：隐藏；
}
.金属线{
位置：相对位置；
顶部：300px；
左：55px；
宽度：450px；
高度：51px；
-webkit剪辑路径：多边形（5%0,95%0,100%100,01100%）；
剪辑路径：多边形（50%0,95%0,100%100,01100%）；
背景：灰色；
-webkit盒阴影：插入0px 5px 50px#000000；
-moz盒阴影：插入0px 5px 50px 000000；
框阴影：插入0px 5px 50px 000000；
}
方形扬声器{
溢出：隐藏；
位置：绝对位置；
文本对齐：居中；
顶部：6px；
左：173像素；
宽度：100px；
高度：35px；
边界半径：2px；
边框样式：插图；
边框宽度：2倍；
边框颜色：#3e3e；
背景：#747474；/*旧浏览器*/
背景：url（'http://www.z.minksfamily.com/squareSpeaker.png中心-moz径向梯度（中心，椭圆覆盖，#74741%，#74741%，#5D5D5D86%）；
背景：url（'http://www.z.minksfamily.com/squareSpeaker.png中心，-webkit径向梯度（中心，椭圆覆盖，#74741%，#74741%，#5D5D5D86%）；
背景：url（'http://www.z.minksfamily.com/squareSpeaker.png中心，径向梯度（中心椭圆，#74741%，#74741%，#5D5D5D86%）；
-webkit动画：squarenoise5s线性0s2；
动画：SquareNoise5s线性0s2；
}
@-webkit关键帧平方噪声{
0%{背景大小：100px 35px；}
1%{背景大小：105px 40px；}
10%{背景大小：100px 35px；}
11%{背景大小：105px 40px；}
30%{背景大小：100px 35px；}
31%{背景大小：105px 40px；}
40%{背景大小：100px 35px；}
41%{背景大小：105px 40px；}
50%{背景大小：100px 35px；}
51%{背景大小：105px 40px；}
60%{背景大小：100px 35px；}
61%{背景大小：105px 40px；}
80%{背景大小：100px 35px；}
81%{背景大小：105px 40px；}
90%{背景大小：100px 35px；}
91%{背景大小：105px 40px；}
100%{背景大小：100px 35px；}
}
@关键帧平方噪声{
0%{背景大小：100px 35px；}
1%{背景大小：105px 40px；}
10%{背景大小：100px 35px；}
11%{背景大小：105px 40px；}
30%{背景大小：100px 35px；}
31%{背景大小：105px 40px；}
40%{背景大小：100px 35px；}
41%{背景大小：105px 40px；}
50%{背景大小：100px 35px；}
51%{背景大小：105px 40px；}
60%{背景大小：100px 35px；}
61%{背景大小：105px 40px；}
80%{背景大小：100px 35px；}
81%{背景大小：105px 40px；}
90%{背景大小：100px 35px；}
91%{背景大小：105px 40px；}
100%{背景大小：100px 35px；}
}
.重新装载机{
位置：绝对位置；
宽度：45px；
高度：45px；
顶部：3px；
左：74px；
背景：白色；
}

你是说白色矩形吗？是的，这是第二个分区。奇怪的是，我刚刚在mac上的chrome上测试了它，它工作正常！我最初是在linux上使用Chromium 45进行测试的。我怎样才能确保它在所有浏览器上都能工作？你可以像我在Chrome45上免费试用和测试一样使用这个工具。但这仍然没有告诉我如何修复它。顺便说一句，我正在测试的chome（mac上的那个）是Chrome49