JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="ghost">
</div>

CSS

.ghost{
    position:relative;
    width:400px;
    height:300px;
    margin:0 auto;
    overflow:hidden;
}
.ghost:before, .ghost:after{
    content:'';
    position:absolute;
}
.ghost:before{
    bottom:0; right:50%;
    width:70%; height:30%;
    transform-origin:100% 100%;
    transform: skewY(30deg) rotate(20deg);
    box-shadow: -100px -100px 0px 99px #656565;
    border-top-right-radius:30% 100%;
}
.ghost:after{
    top:0; right:0;
    transform-origin:100% 0;
    transform:skewX(-10deg) rotate(-20deg);
    box-shadow:none;
    height:107px; width:173px;
    border-top-left-radius:90% 100%;
    box-shadow: -30px -30px 0px 29px #656565, 60px -110px 0px 109px #656565;
}
.in:before{
    
}