将box-shadow添加到:after伪元素之后

Question

我有一个div调用.testimonial-inner并使用:after伪元素我有一个箭头位于它下面指向下方.我遇到的问题是为它添加一个盒子阴影,所以它们看起来都像一个自然元素.

没有box-shadow三角形:

body {
  background: #eee
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
  top: 100%;
  left: 48px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 18px;
  margin-left: -18px;
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
</div>

请注意,框阴影当前不会环绕箭头.

当我将它添加到:after声明中时,我得到以下结果:

body {
  background: #eee
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
  top: 100%;
  left: 48px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 18px;
  margin-left: -18px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
</div>

Answer 1

过滤器可以工作:

.shadowed {
    -webkit-filter: drop-shadow(0px 2px 2px rgba(130,130,130,1));
    filter        : drop-shadow(0px 2px 2px rgba(130,130,130,1));
    -ms-filter    : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
    filter        : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}

工作示例:http://codepen.io/tolmark12/pen/JopNeR？editors = 110

了解更多信息:创建真正的跨浏览器投影

Answer 2

您可以添加另一个:伪元素,将其旋转45deg并添加box-shadow到其中.

更新小提琴

body {
  background: #eee
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
  top: 100%;
  left: 48px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 18px;
  margin-left: -18px;
}
.testimonial-inner:before {
  content: '';
  position: absolute;
  transform: rotate(45deg);
  width: 36px;
  height: 36px;
  bottom: -12px;
  z-index: -1;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
</div>

使用svg三角形的另一种方法.

body {
  background: #eee
}
.testimonial-wrap {
  position: relative;
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
#triangle {
  position: absolute;
  top: 100%;
  margin-top: -1px;
  left: 50px;
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
  <svg id="triangle" width="40" height="26">
    <defs>
      <filter id="f" width="150%" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" />
        <feComponentTransfer>
          <feFuncA type="linear" slope="0.8" />
        </feComponentTransfer>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <path filter="url(#f)" d="M0,0 h40 l-20,20z" fill="white" />
  </svg>
</div>