<div></div>
div {
transform: perspective(3000px);
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
border:10px solid darkblue;
}
div::after {
content: " ";
position: absolute;
background: orangered;
width: 80%;
height: 150%;
display: block;
left: 10%;
bottom: -25%;
transform:rotateX(-10deg);
}
/* Support styling */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.