CODEWITHSUNDEEP
csszurb-foundationbox-shadow
Samia Ruponti
Samia Ruponti

Reputation: 4038

Box shadow on css triangle

I have a few list elements that has a css triangle arrow after them. I'd like to add box-shadow around the arrow, but can't figure out why my shadow isn't working. I have tried following other solutions, but those solutions use ::after pseudo element to make the triangle, but my triangle is a separate div. any help is much appreciated.

#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: Trying to put shadow around the grey triangles, the black one doesn't need any.

Upvotes: 1

Views: 4888

Answers (1)

B7th
B7th

Reputation: 664

As previously answered in CSS box shadow around a custom shape? , you want to use the property filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) with all vendor prefixes.

Upvotes: 6

Related Questions