JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo">MY TEXT</div>

SCSS

.logo {
    $borderWidth: 20px;
    $height: 2em;
    $black: #000;
    $white: #fff;
    color: $black;
    font-size: $height;
    text-align: center;
    letter-spacing: $height/2;
    height: $height;
    margin-top: $height;
    text-transform: uppercase;
    line-height: $height;
    position: relative;
    border-top: 1px solid $black;
    border-bottom: 1px solid $black;
    &::after, &::before {
        content:"";
        border-width: $borderWidth;
        border-style: solid;
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
    }
    &::after {
        border-width: $borderWidth - 2px;
        margin-bottom: 1px;
        border-color: transparent transparent $white transparent;
    }
    &::before {
        border-color: transparent transparent $black transparent;
    }
}