html设置功能区菜单,html – 具有“3D”效果的功能区

我的菜单有以下代码：

• Home
• page1
• page2

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

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

如果有帮助,我的演示：

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