CSS 3D containers like shown in post - html

Question

I've been trying to get this container box into my webpage with html and css.
but I can't seem to get it working properly, could anyone help me out with it?
I dont have any code at the moment, since I've only been copy and pasting tutorials and trying to figure out how it works, but I cant seem to get it right.

Answer 1

Use pseudo elements
Update with shadow
:root{background: #c7c7c7; padding: 80px;}
div{
background: white;
width: 280px;
height: 480px;
position: relative;
margin: 0px auto
}
div:before, div:after{
content: "";
position: absolute;
background: #f2f2f2
}
div:before{
left: 100%;
width: 40px;
height: 100%;
top: 0;
top: 20px;
transform: skew(0deg,45deg);
box-shadow: 2px 1px 1px 0px #9D9C9C, 0 2px 2px #f2f2f2;
}
div:after{
top: 100%;
width: 100%;
height: 40px;
left: 20px;
transform: skew(45deg,0deg);
box-shadow: -2px 2px 1px 0px #9D9C9C, 8px 0 16px #f2f2f2
}
<div><div/>
Update without shadow
:root{background: #c7c7c7; padding: 80px;}
div{
background: white;
width: 280px;
height: 480px;
position: relative;
margin: 0px auto
}
div:before, div:after{
content: "";
position: absolute;
background: #f2f2f2
}
div:before{
left: 100%;
width: 40px;
height: 100%;
top: 0;
top: 20px;
transform: skew(0deg,45deg);
}
div:after{
top: 100%;
width: 100%;
height: 40px;
left: 20px;
transform: skew(45deg,0deg);
}
<div><div/>
Old Update
:root{background-color: #c7c7c7; height: 100vh}
main{
width: calc(100vw - 100px);
height: 120vh;
margin: 20px;
background: white;
position: relative
}
main:before, main:after{
position: absolute;
content: "";
}
main:before{
height: calc(100% - 40px);
width: 50px;
background: #f2f2f2;
right: -50px;
top: 40px
}
main:after{
height: 0;
width: 0;
top: 0;
right: -50px;
border-top: 40px solid transparent;
border-bottom: 0px solid transparent;
border-left: 50px solid #f2f2f2;
}
<main></main>
Or Shadow
:root{background-color: #c7c7c7; height: 100vh}
main{
width: calc(100vw - 100px);
height: 120vh;
margin: 20px;
background: white;
position: relative;
box-shadow: 50px 0 #f2f2f2;
}
main:before{
position: absolute;
content: "";
width: 0;
height: 0;
border-right: 50px solid #c7c7c7;
border-bottom: 50px solid transparent;
right: -50px;
top: 0;
}
<main></main>