CODEWITHSUNDEEP
htmlcss
annikam
annikam

Reputation: 273

CSS: Box Shadow Effect on Scalene Triangle PseudoElement

I am trying to create a box shadow around a scalene triangle that exists as a pseudo element, as shown below. I have tried many ways but cannot seem to get an even shadow below my image.

I have tried putting a second scalene triangle pseudo element with slightly larger dimensions that is grey but since there is no gradient or shadow effect, it is not what I am looking for.

Does anyone have any solutions?

Would really appreciate some ideas; perhaps there is a way to get a border gradient effect on a second pseudo element and underlay it?

.box {
  height: 100px;
  width: 100px;
  background: blue;
  position: relative;
  box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}

.box:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-left: 20px solid transparent;
  border-right: 80px solid transparent;
  border-top: 30px solid blue;
}
<div style='width: 300px;height:300px;background: white;'>
  <div class='box'>
  </div>
</div>

Upvotes: 0

Views: 328

Answers (2)

Wing Choy
Wing Choy

Reputation: 996

You can have a look on this fiddle I have made: https://jsfiddle.net/1fwrn3wh/1/.

The steps you need to do:

  1. Add a :before pseudo element which the same size of :after element
  2. Slightly move :before element downward
  3. Add the filter with blur aspect

Then it will alike the shadow ;)

For your quick editing, you can add this CSS into your file: 

.box:before {
  content: '';
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  border-left: 20px solid transparent;
  border-right: 80px solid transparent;
  border-top: 30px solid rgba(0, 0, 0, 0.5);
  filter: blur(2px);
}

And then change the box-shadow of the original box:

box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);

Cheer ;)

Upvotes: 1

Scoots
Scoots

Reputation: 3102

What you're looking for is filter!

filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));

Maps the shadow around the visible parts of the element, instead of its box.

Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.

Upvotes: 1

Related Questions