JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<span class="hp">HP</span>

CSS

.hp{
    border:5px solid #000;
    border-width: 0 10px;
    -moz-transform:skewX(-13deg);
    -webkit-transform:skewX(-13deg);
    -ms-transform:skewX(-13deg);
    -o-transform:skewX(-13deg);
    transform:skewX(-13deg);
    width:20px;
    height:30px;
    display:block;
    margin:100px;
    color: #fff;
    font-size:0px;
  }
  .hp:after{
    margin: -110px 0 0 -25px;
    content:'';
    background:#000;
    width:10px;
    height: 70px;
    display:block;
  }
  .hp:before{
    margin: 65px 0 0 5px;
    content:'';
    background:#000;
    width:10px;
    height: 70px;
    display:block;
  }