.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; }
<span class="hp">HP</span>