CODEWITHSUNDEEP
htmlcsscss-filters
qadenza
qadenza

Reputation: 9293

css filter on three sides of element

in the example below I need a drop-shadow on all sides except on the top
I tried this - without success

filter:drop-shadow(-3px 3px 3px rgba(0,0,0,0.3), 3px 3px 3px rgba(0,0,0,0.3));


.story{
width:50vw;
margin:0 auto;
height:50vh;
background:orange;
border-radius:0 0 14px 14px;
filter:drop-shadow(-3px 3px 3px rgba(0,0,0,0.3));
}
<div class='story'></div>

Upvotes: 1

Views: 160

Answers (2)

Temani Afif
Temani Afif

Reputation: 272965

Consider a clip-path that will clip only the top part then you can use a basic box-shadow (or a drop-shadow)

.story {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  border-radius: 0 0 14px 14px;
  box-shadow:0px 3px 5px 3px rgba(0, 0, 0, 0.5);
  clip-path:polygon(-50px 0,calc(100% + 50px) 0,calc(100% + 50px) calc(100% + 50px),-50px calc(100% + 50px))
}
<div class='story'></div>

To undestand what the clip-path is doing:

.story {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  border-radius: 0 0 14px 14px;
  box-shadow:0px 0 0 100vmax red;
  clip-path:polygon(-50px 0,calc(100% + 50px) 0,calc(100% + 50px) calc(100% + 50px),-50px calc(100% + 50px))
}
<div class='story'></div>

Upvotes: 2

wazz
wazz

Reputation: 5068

Not sure if there's a built-in way in css to do this. I copied the div and put it right on top of the first one and added the shadow to the right. Hth...

.story {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  border-radius: 0 0 14px 14px;
  filter: drop-shadow(-3px 3px 3px black);
}

.story2 {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  filter: drop-shadow(2px 3px 3px black);
}
<div class='story'>
  <div class='story2'></div>
</div>

Upvotes: 1

Related Questions