Weird CSS Triangle

CSS.css

.body{
  width: 400px;
  height: 400px;
}
.triangle {
  position: relative;
  margin: 0 auto;
  width: 20px;
  height:20px;
}
.left, .right{
  background-color: darkgrey;
  width: 20px;
  height: 20px;
  position: absolute;
}
.left{
  transform: translateX(3px) rotate(58deg);
  border-right: thin solid red;
}
.right{
  transform: translateX(-3px) rotate(32deg);
  border-bottom: thin solid red;
}
.mask{
  background-color: white;
  width: 40px;
  height: 20px;
  position: absolute;
  transform: translate( -10px, -6px )
}

HTML.html

<div class="body">
  <div class="triangle">
    <div class="left"></div>
    <div class="right"></div>
    <div class="mask"></div>
  </div>
</div>