How to implement shadow around triangle with IE9 support? - html

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.

Answer 2

What about using canvas?
https://codepen.io/partypete25/pen/bWWLzN
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(20,20);
context.lineTo(500,20);
context.lineTo(500,300);
context.lineTo(10,300);
context.lineTo(20,280);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.shadowBlur=10;
context.shadowColor="black";
context.fillStyle = '#fff';
context.fill();
</script>

Answer 3

I improved my initial idea.
It looks pretty complex, but works codepen.io
<div class="wrapper">
<div class="container">
<div class="box">
</div>
</div>
</div>
body {
background-color: #F8F8F8;
}
.wrapper {
position: relative;
padding-right: 2px;
}
.wrapper::after {
content: '';
position: absolute;
display: block;
right: 2px;
top: 0;
width: 0;
height: calc(100% - 5px);
box-shadow: 0 2px 4px 1px rgba(62, 62, 62, .2);
z-index: -1;
}
.container {
padding: 1px 0 8px 30px;
position: relative;
overflow: hidden;
}
.box {
position: relative;
background: #FFFFFF;
height: 120px;
box-shadow: 0 2px 4px 0 rgba(62, 62, 62, .2);
}
.box::after {
content: '';
display: block;
position: absolute;
background-color: #FFFFFF;
height: 26px;
width: calc(100% + 12px);
left: -6px;
bottom: -5px;
transform: skewX(-26deg);
box-shadow: -1px 3px 4px -2px rgba(62, 62, 62, .2)
}