JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span></span>
    <span></span>
    <span></span>
</div>



















<p>Max Sucks Cock</p>

CSS

div {
    position: absolute;
    left: 100px;
    top: 100px;
    -webkit-transition: all 0.3s ease-in-out;
}

div:hover {
    cursor: pointer;
    -webkit-transform: scale(5);
}

div > span {
    display: block;
}

div > span:first-child {
    width: 0;
    height: 0;
    overflow: hidden;
    border-bottom: 30px solid black;
    border-left: 52px dotted transparent;
    border-right: 52px dotted transparent;
}

div > span:nth-child(2) {
    width: 104px;
    height: 60px;
    background: black;
}

div > span:last-child {
    width: 0;
    height: 0;
    overflow: hidden;
    border-top: 30px solid black;
    border-left: 52px dotted transparent;
    border-right: 52px dotted transparent;
}

p {
    color:#FFF;
    position:relative;
    z-index:9999;
    margin:15px;
    font-size:22px;
    text-transform:uppercase;
    font-weight:bold;
    font-family:arial, sans-serif;
}