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;
}

#box {
	width: 200px;
	height: 170px;
    margin-top: 30px;
    background-color: black;
    transform: skewY(10deg);
    position: relative;
    z-index: 1; /* doesn't work? */
}
#box:before {
    content: "";
    display: block;
    width: 200px;
    height: 80px;
    position: absolute;
    bottom: -40px;
    left: 0;
    background-color: black;
    transform: skewY(-20deg);
    z-index: -1; /* doesn't work? */
}
#box:hover {
    -webkit-transform: skewY(10deg) rotate(-180deg) scale(0.8);
}