html – 具有“3D”效果的功能区

发布时间：2020-12-14 19:37:53 所属栏目：资源来源：网络整理

导读：我的菜单有以下代码： HTML： div class="container wrapper"nav ul class="menu" lia href="#"Home/a/li lia href="#"page1/a/li lia href="#"page2/a/li /ul/nav 而CSS： .wrapper{ padding:20px; background:#d3d3d3; height:200px;}.menu{ background:#7

我的菜单有以下代码：

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

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

如果有帮助,我的演示：

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

<header>
    <nav></nav>
</header>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!