JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Simple</h2>
<div class="simpleArrow">
    <div></div>
</div>

<h2>With Hover</h2>
<div class="arrow">
    <div>
        <div></div>
    </div>
</div>

CSS

div.arrow {
    position: absolute;
    left: 70px;
    
    -webkit-transform-origin: 0 center;
    -webkit-transition-duration: 250ms;
}

div.arrow:hover {
    -webkit-transform: rotate(90deg);
}


div.arrow > div {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

div.arrow > div > div {
    position: absolute;
    left: -70px;
    width: 100px;
    height: 100px;
    
    background: #008;
    -webkit-transform: rotate(45deg);
}

/* SIMPLE */
div.simpleArrow {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

div.simpleArrow > div {
    position: absolute;
    left: -70px;
    width: 100px;
    height: 100px;
    
    background: #008;
    -webkit-transform: rotate(45deg);
}