1

I am laying a rectangular div on top of a down-arrow image so that only a triangular piece peeks out (I did this by setting the rectangle's z-index to 100 and the arrow's z-index to -100). When I add a drop-shadow to the down-arrow image, I expect only the triangular piece's drop-shadow to appear, but the rest of the down-arrow's drop-shadow that should be hidden under the rectangular div also appears (see image below).

enter image description here.

#arrowDown {
position: relative;
z-index: -100; /* z-index of rectangular div is 100 */
width: 88.5839416px;
height: 82px;
margin: -50px 100px;
bottom: 89.2px;

background: url('../img/arrowDown.png') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

-webkit-filter: drop-shadow(0 0 5px #FFFFFF);
-moz-filter: drop-shadow(0 0 5px #FFFFFF);
-o-filter: drop-shadow(0 0 5px #FFFFFF);
filter: drop-shadow(0 0 5px #FFFFFF);
}
myom
  • 135
  • 2
  • 16
  • Could you set up a jsFiddle or CodePen so we can give more effective answers? My first guess is that the rectangle is defaulting to `background-color:transparent` because you haven't specified one, which allows the shadow to show through. – Brian Oct 15 '14 at 20:51
  • I think that we need to see your code (html,css and js). Like @Brian Bennett said. – Héctor Oct 15 '14 at 20:52
  • 3
    Is the arrow element a child of the rectangle element? Children cannot have a different z-index value of their parents, if the parent is positioned (not static) and also has a z-index value. – Radley Sustaire Oct 15 '14 at 20:53
  • Thanks @RadGH ! The arrow element was a child of the rectangle element. Glad I learned something new today :) – myom Oct 15 '14 at 21:09

0 Answers0