CSS3 伪前后元素上的框阴影

Question

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

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

示例见此处：

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

尝试为阴影的 X 轴添加不同的值，使其不重叠。

.inner:before {box-shadow: -2px 2px 3px 1px rgba(0,0,0,.1)}
.inner:after {box-shadow: 2px 2px 3px 1px rgba(0,0,0,.1)}

body {
  position: relative;
  text-align: center;
}

.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;
}
.inner:before {
      box-shadow: -2px 2px 3px 1px rgba(0,0,0,.1);
}
.inner:after {
      box-shadow: 2px 2px 3px 1px rgba(0,0,0,.1);
}

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

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

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

Answer 2

试试这个：

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

https://jsfiddle.net/47zqjzmf/2/

Answer 3

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>

Answer 4

尝试了不同的解决方案，使用渐变背景。不像是三角形的影子，不过看起来下面还是下面的div

body {
  position: relative;
  text-align: center;
}

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

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

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


.content {
  padding: 20px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,ffffff+15,000000+100&0.65+0,0+100 */
background: -moz-linear-gradient(top, rgba(204,204,204,0.65) 0%, rgba(255,255,255,0.55) 15%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(204,204,204,0.65) 0%,rgba(255,255,255,0.55) 15%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(204,204,204,0.65) 0%,rgba(255,255,255,0.55) 15%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6cccccc', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

<div class="wrapper">
  <div class="inner"></div>
  <div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

CSS3 伪前后元素上的框阴影

CSS3 Box-shadow on pseudo before and after elements

html

css

css-selectors

pseudo-element

box-shadow