Adding box shadow on "custom shaped div" with low z-index

Question

I am not sure if this is even remotely possible, or if i possibly have to rewrite a lot of my code, but anyway; here goes:

If you take a look at the below picture, what i want to achieve is the middle button (green one) in the navigation bar to drop shadows on the 2 other menu buttons, giving the menu a 3D'ish look.

However, first of all i can't get the box shadow to fall properly, as i'm working with a trapezoid and not a box. Also i don't believe i have the skillset to work with SVGs yet.

The second problem is that the green button has a lower z-index compared to the other 2 buttons, since that is how i achieve its actual shape.

My code is posted below the picture.

HTML (the rest of the HTML is dynamically generated by WP, and site is not online yet.

        <div class="row" id="navbar"> <!-- Navigation row -->
            <div class="col-md-12">

                <?php wp_nav_menu( array( 'theme_location' => 'hovedmenu' ) ); ?>
            </div>
        </div>

CSS:

#navbar{
    z-index: 3;
    position:relative;
    box-shadow: 3px 3px 5px #000;
}

#navbar li{
    display:inline-block;
    height:100px;
    line-height:100px;
    width:33.333333333333333%;
    color:black;
    text-align:center;
    font-size:22px;
    font-weight:bold;
    background-color:white;
    padding:0;
}

#navbar li a{
    color:black;
}

body.page-id-10 #navbar li:nth-child(1) > a, body.page-id-12 #navbar li:nth-child(2) > a, body.page-id-14 #navbar li:nth-child(3) > a{
    color:white;
    }

#navbar li:hover{
    color:white;
}

#navbar li:nth-child(1), #navbar li:nth-child(2), #navbar li:nth-child(3){
    float:left;
    position:relative;
    cursor:pointer;
    text-align: center;
}

#navbar li:nth-child(1):hover, body.home li:nth-child(1), body.home li:nth-child(1):after, body.page-id-10 #navbar li:nth-child(1):after,body.page-id-10 .page-item-10, #navbar li:nth-child(1):hover:after, body.page-id-10 #sidebar, body.home #sidebar{

    color: white;
    background-color: #234e7b;
    background-image: -webkit-linear-gradient(top, #234e7b, #0d2951);
    background-image:    -moz-linear-gradient(top, #234e7b, #0d2951);
    background-image:     -ms-linear-gradient(top, #234e7b, #0d2951);
    background-image:      -o-linear-gradient(top, #234e7b, #0d2951);
    background-image:         linear-gradient(top, #234e7b, #0d2951);
}

#navbar li:nth-child(1):after{
    content: "";
    position: absolute;
    background: none repeat scroll 0% 0% #00F;
    top: 0px;
    right: -51px;
    bottom: 0px;
    width: 100px;
    transform: skew(-40deg);
    z-index: 1;
    background-color: #FFF;
}

#navbar li:nth-child(2){
}

#navbar li:nth-child(2):hover, body.page-id-12 .page-item-12, #navbar li:nth-child(2):hover:after, #navbar li:nth-child(2):hover:before, body.page-id-12 #sidebar{
    color:white;
    background-color: #12910f;
    background-image: -webkit-linear-gradient(top, #12910f, #0b4b0e);
    background-image:    -moz-linear-gradient(top, #12910f, #0b4b0e);
    background-image:     -ms-linear-gradient(top, #12910f, #0b4b0e);
    background-image:      -o-linear-gradient(top, #12910f, #0b4b0e);
    background-image:         linear-gradient(top, #12910f, #0b4b0e);
}

#navbar li:nth-child(2):before{
    content: "";
    position: absolute;
    background: none repeat scroll 0% 0% #F00;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 50px;
    transform: skew(-40deg);

    background-color: #FFF;
}

#navbar li:nth-child(2):after{
    content: "";
    position: absolute;
    background: none repeat scroll 0% 0% #F00;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 50px;
    transform: skew(40deg);
    z-index: 10;

    background-color: #FFF;
}

#navbar li:nth-child(3):before{
    content: "";
    position: absolute;
    background: none repeat scroll 0% 0% #F00;
    top: 0px;
    left: -51px;
    bottom: 0px;
    width: 100px;
    transform: skew(40deg);
    z-index:100;

    background-color: #FFF;

}

body.page-id-14 #navbar .page-item-14, body.page-id-14 #navbar li:nth-child(3):before, #navbar li:nth-child(3):hover, #navbar li:nth-child(3):hover:before{
    background-image: -webkit-linear-gradient(top, #f83838, #c00000);
    background-image:    -moz-linear-gradient(top, #f83838, #c00000);
    background-image:     -ms-linear-gradient(top, #f83838, #c00000);
    background-image:      -o-linear-gradient(top, #f83838, #c00000);
    background-image:         linear-gradient(top, #f83838, #c00000);
}

#navbar li:hover > a{
    color:white;
    text-decoration: none;
}

score 1 · Accepted Answer · answered Feb 24 '16 at 20:14

1

How about this? https://jsfiddle.net/ahm0r2ng/1/

It uses a transformed pseudo element z-indexed behind the 2nd <a> element.

html

<nav>
  <a>About</a>
  <a>Work</a>
  <a>Contact</a>
</nav>

css

*{ box-sizing:border-box; }
nav{ background:white; width:calc(100% - 40px); margin:20px; font-family:Arial; font-size:18px; overflow:hidden; }
nav a{ float:left; width:33.33%; padding:20px; text-align:center; position:relative; z-index:1; }
nav a:nth-child(2){ color:white;  }
nav a:nth-child(2):after{ 
transform: matrix3d(1,0,0.00,0,0.00,1.2,0.00,-0.002,0,0,1,0,0,0,0,1);
-webkit-transform: matrix3d(1,0,0.00,0,0.00,1.2,0.00,-0.002,0,0,1,0,0,0,0,1);


 background:tomato; box-shadow: 0 0 30px rgba(0,0,0,0.3); content:''; position:absolute; top:0; bottom:0; right:0; left:0; z-index:-1; }

The transform matrix was generated here: http://ds-overdesign.com/transform/matrix3d.html

The key was to use -0.002 depth (X).

answered Feb 24 '16 at 20:14

rorymorris89

1,144
7
14

Looks nice. But i already have an nth-child(2):after for my navigation bar. So i suppose i will have to rewrite a bit of code to achieve this? Or is it actually possible to have multiple :after of the same element? – Jonas Mohr Pedersen Feb 24 '16 at 20:41
You can use both `:before` and `:after` as pseudo elements in CSS. I often wish for there to be more than 2 available, but hey ho. – rorymorris89 Feb 24 '16 at 20:43
Alright, i am already using both :before and :after - so will have to rewrite my code a fair share. Nonetheless you seem to have solved my problem, despite it not being the easiest way for me, thank you! – Jonas Mohr Pedersen Feb 24 '16 at 20:53

Adding box shadow on "custom shaped div" with low z-index

1 Answers1