html – 具有“3D”效果的功能区_html-js-css

概述我的菜单有以下代码： 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> </u 我的菜单有以下代码：

HTML：

<div ><nav>    <ul >        <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属性来实现我想要的.

为了更好地解释我想要的东西：

如果有帮助,我的演示：

demo

非常感谢你指出了正确的方向.

解决方法您可以在伪元素上使用边框,在菜单栏的左上角和右上角制作2个较暗的三角形.

要使菜单栏比容器宽,可以使用负左/右边距：

DEMO

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