<main>
<div class=slit-shadow></div>
<div class=slit-cover></div>
</main>
.slit-shadow{
height: 350px;
width: 3px;
background: linear-gradient(to bottom, beige, orange, black, orange, beige);
filter: blur(6px);
transform: translatex(-25px);
}
.slit-cover{
height: inherit;
background:inherit;
width: 50%;
transform: translatex(calc(-50% - 25px));
display:grid;
align-items:center;
justify-items: center;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
main>div{
grid-area: 1 / 1;
}
main{
width: 300px;
height: 400px;
display: grid;
align-items: center;
justify-items: center;
background: beige;
}
body{
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.