Javascript 将边框添加到内部三角形

我有一个里面有三角形的div，就像这样：

#内部分区{
宽度：200px；
高度：200px；
背景色：黑色；
位置：相对位置；
边框：2倍纯红；
}
#三角{
右边框：15px实心透明；
左边框：15px实心透明；
边框底部：15px纯白；
位置：绝对位置；
底部：0px；
左：50%；
左边距：-13.5px；
}

---

您可以使用伪元素执行此操作：

---

非常好的回答@joshnh！

<div class="inner-div">
    <span class="triangle"></span>
</div>

.inner-div {
  width:200px;
  height:200px;
  background-color:black;
  position:relative;
  border:2px solid red;
  z-index:-1;
}
.triangle {
  border-right:15px solid transparent;
  border-left:15px solid transparent;
  border-bottom:15px solid white;
  position:absolute;
  bottom:-2px;
  left:50%;
  margin-left:-15px;
}
.triangle:after {
  border-right:18px solid transparent;
  border-left:18px solid transparent;
  border-bottom:18px solid red;
  content:'';
  position:absolute;
  left:-18px;
  bottom:-15px;
  z-index:-1;
}