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>
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/
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:
.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With