1

我有一些列表元素，它们后面有一个 css 三角形箭头。我想box-shadow在箭头周围添加，但不知道为什么我的阴影不起作用。我尝试过其他解决方案，但这些解决方案使用::after伪元素来制作三角形，但我的三角形是一个单独的div. 任何帮助深表感谢。

#shippingsteps li {
  padding: 15px 15px 15px 35px;
  background: #ececec;
  float: left;
  display: block;
}
#shippingsteps li a {
  color: #4A4947
}
#shippingsteps li span {
  background: #7c7a7b;
  color: white;
}
#shippingsteps li.active {
  background: black;
  color: white;
  font-weight: bold
}
#shippingsteps li.active a {
  color: white;
}
#shippingsteps li.active span {
  background: #C60001;
  color: white;
  border-color: #C60001
}
#shippingsteps li::after {
  border: none;
}
#shippingsteps li .nav-arrow {
  border-color: transparent transparent transparent #ececec;
  border-style: solid;
  border-width: 31px 0 30px 20px;
  ;
  height: 0;
  position: absolute;
  right: -19px;
  top: 0;
  width: 0;
  z-index: 150;
}
#shippingsteps li .nav-arrow::after {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: transparent transparent transparent #ececec;
  border-image: none;
  border-style: solid;
  border-width: 31px 0 30px 20px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);
  content: "";
  position: absolute;
  right: 3px;
  top: -32px;
  transform: rotate(31deg);
  z-index: 100;
}
#shippingsteps li.active .nav-arrow {
  border-color: transparent transparent transparent #000;
}
<ul class="clearfix" id="shippingsteps">
  <li class="first active">
    <div class="nav-arrow"></div>
    <span>1</span><a data-target="checkout_login" href="#">
        Checkout Method </a>
  </li>
  <li>
    <div class="nav-arrow"></div>
    <span>2</span><a data-target="billing_shipping" href="#">
        Billing &amp; Shipping</a>
  </li>
  <li>
    <div class="nav-arrow"></div>
    <span>3</span><a data-target="order_review" href="#">
        Your Order &amp; Payment</a>
  </li>
  <li><span>4</span><a href="#">
        Confirmation</a>
  </li>
</ul>

PS：尝试在灰色三角形周围放置阴影，黑色不需要任何阴影。

4

1 回答 1

6

正如之前在自定义形状周围的 CSS 框阴影中回答的那样？，您想使用filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))带有所有供应商前缀的属性。

于 2015-09-21T16:29:22.387 回答