Question

我不确定这是否可以远程实现，或者我是否可能需要重写我的大量代码，但无论如何;在这里：

如果您看一下下面的图片，我想要实现的是导航栏中的中间按钮（绿色按钮）在其他2个菜单按钮上投下阴影，为菜单提供3D＆＃39; ish外观

然而，首先我不能让盒子阴影正常掉落，因为我正在使用梯形而不是盒子。此外，我还不相信自己拥有使用SVG的技能。

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

我的代码发布在图片下方。

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/

它使用在第二个<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）。

在＆＃34;自定义形状的div＆＃34;上添加框阴影低z指数

1 个答案: