在具有低 z-index 的 "custom shaped div" 上添加框阴影

Question

我不确定这是否可行，或者我是否可能需要重写很多代码，但无论如何；这里是：

如果你看下面的图片，我想要实现的是导航栏中的中间按钮（绿色按钮）在其他 2 个菜单按钮上放置阴影，使菜单看起来像 3D .

但是，首先我无法让盒子阴影正确落下，因为我使用的是梯形而不是盒子。我也不相信我有使用 SVG 的技能。

第二个问题是，与其他 2 个按钮相比，绿色按钮的 z-index 较低，因为这是我实现其实际形状的方式。

我的代码贴在图片下面

HTML（剩下的HTML是WP动态生成的，网站还没上线

        <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;
}

Answer 1

这个怎么样？ https://jsfiddle.net/ahm0r2ng/1/

它在第 2 个 <a> 元素后面使用一个转换后的伪元素 z-indexed。

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; }

这里生成了变换矩阵：http://ds-overdesign.com/transform/matrix3d.html

关键是使用 -0.002 深度 (X)。

在具有低 z-index 的 "custom shaped div" 上添加框阴影

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

css

z-index

shadow

box-shadow