How to make triangular drop shadow? - html

Question

I'm trying to do this
The main idea is to make the carousel inside this div which will contain images and text.
.background {
height: 657px;
/* background-color: red; */
background-image: linear-gradient(135deg, #D4B8CE 5%, #DEC2D8 100%);
}
.background:before {
content: '';
width: 100%;
height: .3%;
bottom: 20%;
position: absolute;
background-image: linear-gradient(to right, #B59AB0 5%, #CBB2C7 100%);
}
.background:after {
z-index: 9;
content: '';
background-image: linear-gradient(45deg, #D9BDD4 5%, #EBCFE5 100%);
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
}
.listdiv {
z-index: 10;
position: absolute;
height: 80%;
bottom: 12%;
left: 40%;
width: 25%;
background-color: white;
background-image: url(https://i.pinimg.com/originals/93/34/c7/9334c7e1fb00a2b49b8c1d4504ec0a45.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0px 6px 12px -6px #00000066;
}
.listdiv::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 404.8px 50px 44px 0;
border-color: transparent #9191913d transparent transparent;
line-height: 0px;
left: -15.5%;
filter: saturate(52);
filter: drop-shadow(-5px 4px 17px black)blur(8px);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="background w-100 bg-red">
<div class="listdiv">
</div>
</div>
How I can realize this shadow like the above image?
Please run code snippet in full page mode to see the issue.

Answer 1

You can approximate this using pseudo element, gradient and some filter.
Play with the different values until you get what you want:
body {
background:pink;
margin:0;
padding-bottom:100px;
}
.container {
padding:20px;
background:#e4a8b3;
position:relative;
z-index:-1;
}
.box {
background:white;
width:200px;
height:300px;
margin:0 auto -50px;
border:1px solid grey;
position:relative;
}
/* Relevant code start here */
.box:before,
.box:after {
content:"";
position:absolute;
z-index:-1;
right:98%;
width:70px;
filter:blur(4px);
}
.box:before {
bottom:30px;
top:0;
background:
linear-gradient(to bottom right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
bottom / 100% 115%;
}
.box:after {
height:32px;
bottom:0;
background:
linear-gradient(to top right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
top / 100% 115%;
}
/**/
<div class="container">
<div class="box"></div>
</div>
You can optimize the code to use only one pseudo element:
body {
background:pink;
margin:0;
padding-bottom:100px;
}
.container {
padding:20px;
background:#e4a8b3;
position:relative;
z-index:-1;
}
.box {
background:white;
width:200px;
height:300px;
margin:0 auto -50px;
border:1px solid grey;
position:relative;
}
/* Relevant code start here */
.box:before {
content:"";
position:absolute;
z-index:-1;
right:98%;
width:70px;
top:0;
bottom:0;
filter:blur(4px);
background:
linear-gradient(to top right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
bottom -10px center / 100% calc(30px + 10px),
linear-gradient(to bottom right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
top -20px center / 100% calc(100% - 30px + 20px);
background-repeat:no-repeat;
}
/**/
<div class="container">
<div class="box"></div>
</div>