JSFiddle - React, Tailwind, and code Playground

HTML

<div class="original"></div>
<div class="original-rotated-a-little"></div>
<div class="original-rotated-forty-five"></div>
<div class="original-with-transform-origin-rotated-a-little"></div>
<div class="original-with-transform-origin-rotated-forty-five"></div>

CSS

body {
    margin-left:50px
}
    
div {
    position:relative;
    height: 50px;
    width: 35px;    
    overflow: hidden;
    top: 0px;
    margin-top: 5px;
    left: -8px;
    border:1px dashed red;
}   
div:after {
    content: "";
    position: absolute;
    border: 1px solid #999;
    width: 25px;
    height: 25px;
}

div.original-rotated-a-little:after {
    -webkit-transform: rotate(15deg);
}

div.original-rotated-forty-five:after {
    -webkit-transform: rotate(45deg);
}

div.original-with-transform-origin-rotated-a-little:after {
    -webkit-transform-origin: 5px 25px;
    -webkit-transform: rotate(15deg);
}

div.original-with-transform-origin-rotated-forty-five:after {
    -webkit-transform-origin: 5px 25px;
    -webkit-transform: rotate(45deg);
}