JSFiddle - React, Tailwind, and code Playground

by rudiedirkx

HTML

<div id="box"></div>

CSS

body {
    background:
        linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
        linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
        linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
    background-color:#e1ebbd;
    background-size: 128px 128px;
    padding: 20px;
}

#box {
    width: 200px;
    height: 200px;
    border-left: 200px solid black;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    
    -webkit-transition: all 300ms ease-in;
    outline: solid 3px black;
}
#box:hover {
    -webkit-transform: rotate(-180deg) scale(0.5);
}