How to implement shadow around triangle with IE9 support?

Question

I got to make a block like that.

Is there a way how to apply box-shadow for the block without shadows overlapping?

Here is my the best result - http://codepen.io/To_wave/pen/zwwqRd

<div class="box">
    <div class="triangle"></div>
</div>

body {
  background: #F8F8F8;
  padding: 50px;
}

.box {
  height: 150px;
  background: #FFF;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(62, 62, 62, 0.2);
}

.triangle {
  width: 14px;
  height: 26px;
  position: absolute;
  left: -13px;
  bottom: -4px;
  overflow: hidden;
}

.triangle:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 30px;
  background: #fff;
  transform: skew(-26deg);
  bottom: 4px;
  left: 10px;
  box-shadow: 0px 2px 4px 0px rgba(62, 62, 62, 0.2);
}

Answer 1

to_wave.

I create this bubble box using only one div and a different concept on the triangle to avoid this shadow box issue. Its not the perfect solution, but it works: https://jsfiddle.net/DiogoBernardelli/028wqpee/1/

What i made was create this m-bubble::before with width: calc(100% + 7px) (the calc is because the left:-7px positioning), and adding a bottom:-3px. That way, this element will fill the entire bottom of the bubble and you will avoid the shadows overlapping.

I used perspective, rotateX and transform-origin to create this "one side skewed" element. If you have a better solution to do it, fill free to make your own adjustments.

Hope it works for you, and sorry about my english.

Best regards from Brazil.