I have two boxes, they are stacked vertically. I want the top div to have a box shadow on its bottom edge. The top box's shadow is hidden behind the bottom box.
How do I fix this?
You need to split your code into an outer and an inner DIV and only apply the drop shadow to the inner div. You would need two elements each with their own box-shadow and the triangle 'element' would need to be transformed.
You can comma separate box-shadow any many times as you like.
The 'box-shadow' property. The 'box-shadow' property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ''inset'' keyword.
You can use:
either
#first{ position:relative; z-index:2; }
or
#second{ margin-top:10px; }
PS: Sorry for the previous answer mistakes. - Example shown: http://jsfiddle.net/fdezluis96/FRQKA/
Good luck!
Or just add a margin-bottom: 10px or something to top div
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With