JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangleBorder">
    <span>Content<span>
</div>

CSS

.triangleBorder {
    position: relative;
    width: 200px;
    height: 173.2px; /* for equalateral = Width * sq.root 3 / 2 */
}

.triangleBorder:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    z-index: -2;
    border: 100px solid transparent;
    border-top-width: 0;
    border-bottom: 173.2px solid black;
}

.triangleBorder:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: -1;
    border: 99px solid transparent;
    border-top-width: 0;
    border-bottom: 171.5px solid white;
}

.triangleBorder span {
   position: absolute;
   width: 100%;
   text-align: center;
   top: 50%;
}