これがリモートで可能かどうか、または多くのコードを書き直す必要があるかどうかはわかりませんが、とにかく; ここに行きます：
下の図を見ると、達成したいのはナビゲーション バーの中央のボタン (緑色のボタン) で、他の 2 つのメニュー ボタンに影を落として、メニューに 3D っぽい外観を与えることです。
ただし、まず、ボックスではなく台形を使用しているため、ボックスの影を適切に落とすことができません。また、私はまだ SVG を扱うスキルセットを持っているとは思いません。
2 番目の問題は、緑のボタンの 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;
}