我的菜单有以下代码：
HTML：
<div class="container wrapper">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">page1</a></li>
<li><a href="#">page2</a></li>
</ul>
</nav>
而CSS：
.wrapper{
padding:20px;
background:#d3d3d3;
height:200px;
}
.menu{
background:#7F7979;
}
.menu li{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
display: inline-block;
}
.menu li a{
color:white;
}
nav ul{
list-style:none;
margin:0
padding:0;
}
我想要实现的是在左右角看起来像是来自容器后面(如果我们可以这样称呼它就像3D效果一样).没有尝试任何东西,因为我不知道如何实现这一点.
我google了一下,但没有找到任何网站来检查代码.如果有人知道,请指出我.
另外,如何通过忽略容器填充来实现此目的？是否有可能使用我的菜单在这个容器内,它有一个填充,仍然迫使边缘走出它？
注意：我不是试图有人为我做这件事,我想弄清楚我应该用什么CSS属性来实现我想要的.
为了更好地解释我想要的东西：
如果有帮助,我的演示：
非常感谢你指出了正确的方向.
解决方法
您可以在伪元素上使用边框,在菜单栏的左上角和右上角制作2个较暗的三角形.
要使菜单栏比容器宽,可以使用负左/右边距：
header{
width:80%;
margin: 0 auto;
background:#D3D3D3;
padding:100px 0 200px;
}
nav{
position:relative;
height:50px;
background: #7E7979;
margin: 0 -25px;
}
nav:before,nav:after{
content:'';
position:absolute;
top:-10px;
border-bottom:10px dotted #5C5C5B;
}
nav:before{
left:0;
border-left:25px solid transparent;
}
nav:after{
right:0;
border-right:25px solid transparent;
}
<header>
<nav></nav>
</header>
