JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#outer {
    margin-top:50px;
    padding-bottom:50px;
    border-top:4px solid red;
    background:#ccc;
    text-align:center;
}
#outer div {
    position:relative;
    display:inline-block;
    margin:-27px 25px 0 25px;
    width:50px;
    height:50px;
    background:#000;
}
#outer div:after, #outer div:before {
    content:" ";
    position:absolute;
    top:23px;
    width:5px;
    height:0;
    overflow:hidden;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
}
#outer div:after {
    left:-5px;
}
#outer div:before {
    right:-5px;
}