Adding depth to a box CSS - html

Question

I am trying to add sides to a box div with CSS but can't seem to figure it out. This is what I have so far. Can anyone point me in the right direction? I have included below the picture I am trying to replicate. It is the middle box.
body {
background: #1b1b1b;
color: white;
}
.container {
display: table;
margin: auto;
}
.box {
width: 150px;
height: 150px;
background: #cc0000;
margin: 50px;
}
.right-skew {
position: relative;
}
.right-skew:before {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg);
}
.right-skew:after {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(10deg);
-ms-transform: skew(10deg);
transform: skew(10deg);
}
.skew-border {
border: 5px solid yellow;
}
<div class="container">
<div class="box right-skew"></div>
</div>

Answer 1

You can accomplish this with borders pretty easily.
I'd put a large border around the left and right boxes and only color and left and right borders inversely.
* {
box-sizing: border-box;
}
.boxes {
display: flex;
justify-content: center;
}
.box {
width: 30%;
height: 200px;
text-align: center;
}
.box--1,
.box--3 {
border: 20px solid white;
background-color: rgb(200, 0, 0);
}
.box--1 {
border-right-color: red;
}
.box--3 {
border-left-color: red;
}
.box--2 {
background-color: darkred;
}
<div class="boxes">
<div class="box box--1">1</div>
<div class="box box--2">2</div>
<div class="box box--3">3</div>
</div>
Here's a quick demo: https://jsfiddle.net/15k214am/3/
Some fun with transitions cause I'm bored: https://jsfiddle.net/15k214am/4/
Here's a small adjustment to allow the background color to show through: https://jsfiddle.net/15k214am/5/

Answer 2

On either side, you need to add a couple of pseudo elements that are rotated with perspective added to the rotation transform.
body {
background: #1b1b1b;
color: white;
}
.container {
display: table;
margin: auto;
}
.box {
width: 150px;
height: 150px;
background: #cc0000;
margin: 50px;
}
/* following lines were added/modified */
.with-depth {
position: relative;
}
.with-depth:before, .with-depth:after {
content: '';
position: absolute;
top: 0px; /* no need to change */
height: 100%; /* no need to change */
width: 25px; /* can be changed depending on the required width */
background: grey;
z-index: -1; /* not really needed but will stop it from interfering with interation */
}
.with-depth:before {
right: -25px; /* equal to -1 * width of pseudo-element */
transform-origin: left; /* don't change */
transform: perspective(10px) rotateY(10deg); /* can be changed as per need */
}
.with-depth:after {
left: -25px; /* equal to -1 * width of pseudo-element */
transform-origin: right; /* don't change */
transform: perspective(10px) rotateY(-10deg); /* can be changed as per need */
}
/* just for demo */
.box:hover{
height: 250px;
width: 250px;
}
<div class="container">
<div class="box with-depth"></div>
</div>
Using this method would:
produce a responsive output (try hovering the element in the demo) unlike the output that would be produced through the border method (was referring to adding borders with pseudo-element on the middle one and not borders on the side elements like the other answer, which is very good).
leave the portion above and below the side elements transparent just in case the need is to show the background.
let you have greater control over the angle of the depth.
make it a little more easier to add extra effects like shadows etc to the box. Refer demo below. (This point is not applicable for shape shown in question but would be useful for a generic one.)
.box {
width: 150px;
height: 150px;
background: #cc0000;
margin: auto;
box-shadow: 0px 2px 4px 2px #CCC;
}
.with-depth {
position: relative;
}
.with-depth:before,
.with-depth:after {
content: '';
position: absolute;
top: 0px;
height: 100%;
width: 25px;
background: grey;
}
.with-depth:before {
right: -25px;
transform-origin: left;
transform: perspective(10px) rotateY(10deg);
box-shadow: 4px 4px 4px 2px #CCC;
}
.with-depth:after {
left: -25px;
transform-origin: right;
transform: perspective(10px) rotateY(-10deg);
box-shadow: -4px 4px 4px 2px #CCC;
}
/* just for demo */
.box:hover {
height: 250px;
width: 250px;
}
<div class="box with-depth"></div>