html - div底部带有三 Angular 形的多重框

我正在与CSS代码战斗以获得应该很容易的东西：
在同一页上多个div的底部添加一个三角形。

这是我正在使用的代码：

.areatitolo {
    background-color: #bb0000;
    color: #fff;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    padding:5%;
    margin-top:100px;
    width:100%;
    margin-bottom:60px;
}

.areatitolo:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #bb0000;
    border-left: solid 100px transparent;
    border-right: solid 100px transparent;
}

除了只有第一个起作用并且我需要使用相同的效果3次外，应该没有任何问题。
你知道我在哪里弄错了吗？

https://jsfiddle.net/federico_feroldi/0zrfL4q1/4/

谢谢您的帮助。

最佳答案

将position: relative;添加到.areatitolo。