为三角形伪元素添加边框和阴影

Question

我想在这些三角形之一中添加底部边框（2-3px）和阴影框，但是由于它们的区域已经通过：before添加，因​​此我对如何做到这一点有所保留。有办法以某种方式实现这一目标吗？

.container {
  width: 300px;
  height: 100px;
  background: blue;
  position: relative;
}

.green {
  background: green;
}

.container:before {
    content: "";
    position: absolute;
    left: 0;
    z-index: 9999;
    top: 72px;
    border-top: 20px solid red;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    bottom: -20px;
}

<div class="container"></div>
<div class="container green"></div>