<div class="box">

</div>

<div class="triangle_test"></div>

.box {
  position: relative;
  width: 346px;
  height: 200px;
  background-color: red;
  margin: 120px auto;
}
.box::before {
  content: "";
  position: absolute;
  left: 0;
  top: -100px;
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 173px solid transparent;
  border-left: 173px solid transparent;
}

.box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 200px;
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 173px solid transparent;
  border-left: 173px solid transparent;
}

.triangle_test {
  width: 0;
  height: 0;
  border-top: 100px solid #000;
  border-right: 100px solid #333;
  border-bottom: 100px solid #666;
  border-left: 100px solid #999;
}