JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
    <div class="content">
        <p>Some text</p>
    </div>
    <div class="two"></div>
</div>

CSS

.one{
    width: 100px;
    height: 100px;
    position: relative;
}

.one:before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    border: 5px solid transparent;
    border-right-color: gray;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.one:after{
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    border: 5px solid transparent;
    border-bottom-color: gray;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.two{
    position: absolute;
    width: 100%;
    bottom: 0;
}
.two:after{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    border: 5px solid transparent;
    border-top-color: gray;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.two:before{
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    border: 5px solid transparent;
    border-left-color: gray;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.content{
    padding: 5px;
}