html - 伪前后元素上的 CSS3 Box-shadow

Question

我需要创建这样的东西来分隔移动设计中的部分:

我可以使用 CSS 轻松创建 Angular 部分，但我很难正确设置框阴影。问题是，我只需要前后伪元素底部的框阴影。但是它被添加到所有的边上，所以当两个元素在中间相遇形成盒子阴影重叠的点时。

例子见这里:

这是我目前所拥有的(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);
}

关于如何实现这种效果有什么建议吗？

Answer 1

box-shadow 不会帮助你，因为正如属性名称所说，它是用于盒子的。对您有帮助的是 filter: drop-shadow()。此外，您可以使用 clip-path 属性来代替创建这两个伪元素矩形。

.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>