在剪切的div

Question

我现在正在开展一个项目，我试图在div的底部设div。我没那么好，但我也希望div的两侧有角度。我也能做到这一点。我开始在div中添加我想要的东西（底部的那个和有角度的边）并且已经添加了一个div但是当我添加另一个时（两者之间差别不大） clip-path停止了工作！我使用HTML和CSS（没有引导程序）。

这是我的代码（https://jsfiddle.net/MalMan35/uu7weo6o/4/）：

＆＃13;

＆＃13;

body {
  background: black;
}
.messegeHolder {
  top: 50%;  
  -webkit-transform: translate(-285px, -185px);
  transform: translate(-285px, -185px);
  left: 50%; 
  width: 570px;
  height: 370px;
  position: fixed;
  overflow: hidden;
  border-radius: 10px;
}
.mainbox {
  margin: 0 auto;
  margin-top: 10px;
  width: 550px;
  height: 350px;
  position: relative;
  background: rgba(51,51,51,1);
  background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 45%, rgba(17,17,17,1) 90%, rgba(17,17,17,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(51,51,51,1)), color-stop(45%, rgba(51,51,51,1)), color-stop(90%, rgba(17,17,17,1)), color-stop(100%, rgba(17,17,17,1)));
  background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 45%, rgba(17,17,17,1) 90%, rgba(17,17,17,1) 100%);
  background: -o-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 45%, rgba(17,17,17,1) 90%, rgba(17,17,17,1) 100%);
  background: -ms-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 45%, rgba(17,17,17,1) 90%, rgba(17,17,17,1) 100%);
  background: linear-gradient(to bottom, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 45%, rgba(17,17,17,1) 90%, rgba(17,17,17,1) 100%);
  border-radius: 50px;  -webkit-box-shadow: inset 0px 5px 50px #000000;
  -moz-box-shadow: inset 0px 0px 50px #000000;
  box-shadow: 0px 0px 100px #999999;
  overflow: hidden;

}
.metalLine {
  position: relative;
  top: 300px;
  left: 55px;
  width: 450px;
  height: 51px;
  -webkit-clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 95% 0, 100% 100%, 0 100%);
  background: grey;
  -webkit-box-shadow: inset 0px 5px 50px #000000;
  -moz-box-shadow: inset 0px 5px 50px #000000;
  box-shadow: inset 0px 5px 50px #000000;
}
.squareSpeaker{
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 6px;
  left: 173px;
  width: 100px;
  height: 35px;
  border-radius: 2px;
  border-style: inset;
  border-width: 2px;
  border-color: #3e3e3e;
  background: #747474; /* Old browsers */
  background: url('http://www.z.minksfamily.com/squareSpeaker.png') center, -moz-radial-gradient(center, ellipse cover, #747474 1%, #747474 1%, #5d5d5d 86%);
  background: url('http://www.z.minksfamily.com/squareSpeaker.png') center, -webkit-radial-gradient(center, ellipse cover, #747474 1%,#747474 1%,#5d5d5d 86%);
  background: url('http://www.z.minksfamily.com/squareSpeaker.png') center, radial-gradient(ellipse at center, #747474 1%,#747474 1%,#5d5d5d 86%); 
  -webkit-animation: squareNoise 5s linear 0s 2;
  animation: squareNoise 5s linear 0s 2;
}
@-webkit-keyframes squareNoise {
  0%   {background-size: 100px 35px;}
  1%  {background-size: 105px 40px;}
  10%   {background-size: 100px 35px;}
  11% {background-size: 105px 40px;}
  30%   {background-size: 100px 35px;}
  31%  {background-size: 105px 40px;}
  40%   {background-size: 100px 35px;} 
  41%  {background-size: 105px 40px;} 
  50%   {background-size: 100px 35px;} 
  51%  {background-size: 105px 40px;} 
  60%   {background-size: 100px 35px;} 
  61%  {background-size: 105px 40px;}
  80%   {background-size: 100px 35px;} 
  81%  {background-size: 105px 40px;}
  90%   {background-size: 100px 35px;}
  91%  {background-size: 105px 40px;} 
  100%   {background-size: 100px 35px;}  
}
@keyframes squareNoise {
  0%   {background-size: 100px 35px;}
  1%  {background-size: 105px 40px;}
  10%   {background-size: 100px 35px;}
  11% {background-size: 105px 40px;}
  30%   {background-size: 100px 35px;}
  31%  {background-size: 105px 40px;}
  40%   {background-size: 100px 35px;} 
  41%  {background-size: 105px 40px;} 
  50%   {background-size: 100px 35px;} 
  51%  {background-size: 105px 40px;} 
  60%   {background-size: 100px 35px;} 
  61%  {background-size: 105px 40px;}
  80%   {background-size: 100px 35px;} 
  81%  {background-size: 105px 40px;}
  90%   {background-size: 100px 35px;}
  91%  {background-size: 105px 40px;} 
  100%   {background-size: 100px 35px;}
}
.reloadHolder {
  position: absolute;
  width: 45px;
  height: 45px;
  top: 3px;
  left: 74px;
  background: white;
}

＆＃13;

<div class="messegeHolder">
  <div class="mainbox">
    <div class="metalLine">
      <div class="squareSpeaker"></div>
      <div class="reloadHolder"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;