CSS3 Box-shadow on pseudo before and after elements

Question

I need to create something like this to separate sections in a mobile design:

I can create the angled part easily with CSS, but I am having a tough time getting the box-shadow right. The issue is, I only need the box-shadow on the bottom of the before, after pseudo elements. But it is being added to all sides, so when the two elements meet in the middle to form the point the box-shadows overlap.

See here for example:

Here's what I have so far (jsfiddle: https://jsfiddle.net/47zqjzmf/1/)

HTML:

<div class="wrapper">
  <div class="inner"></div>
</div>

CSS:

.wrapper {
  display: inline-block;
  background: #fff;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.inner {
  position: relative;
  background: lightblue;
  width: 100%;
  height: 120px;
}

.inner:before, .inner:after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: calc(50% + 5px);
    height: 20px;
    background-color: #fff;
    box-shadow: 1px 1px 10px 1px #000;
}

.inner:before {
  left: -2px;
  transform: rotate(7deg);
}

.inner:after {
  right: -2px;
  transform: rotate(-7deg);
}

Any suggestions on how I can achieve this effect?

Answer 1

box-shadow won't help you, because as the property name says, it's for boxes. The thing that will help you is filter: drop-shadow(). Also, instead of creating these two pseudoelement rectangles you can use clip-path property.

.element {
  width: 300px;
  color: white;
  filter: drop-shadow(0 0 15px black);
}

.element__clip {
  -webkit-clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
  background: blue;
}

<div class="element">
  <div class="element__clip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices, lorem id pellentesque sollicitudin, mauris massa aliquam velit, ut sagittis tellus justo non turpis. In tempor at dui et placerat. Aliquam dolor lorem, maximus non nunc sit amet, condimentum aliquam neque. Suspendisse potenti. Aliquam laoreet purus sed arcu elementum varius. Nullam ante tortor, elementum sit amet justo vel, mollis dapibus massa. Sed ultricies dapibus eros ac laoreet. Maecenas posuere arcu enim, non interdum ipsum vulputate nec. Nulla iaculis orci ac mattis accumsan. Praesent id auctor ipsum. Aenean cursus arcu placerat nunc consectetur, feugiat tincidunt felis placerat. Quisque id sagittis mi. Curabitur tincidunt consequat orci, eu congue metus ultrices at. Aenean luctus justo et pharetra tristique.</div>
</div>