JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    width: 8em;
    height: 8em;
    -webkit-transform: skewX(30deg) scaleY(.866);
    margin: 100px auto 0;
    overflow: hidden;
    border: 5px solid #000;
}

div:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866);
    background: #f30;
    border: 5px solid #000;
    overflow: hidden;
}