带有“3D"的功能区影响 [英] Ribbon with a "3D" effect
问题描述
我的菜单有以下代码:
HTML:
<导航><ul class="菜单"><li><a href="#">首页</a></li><li><a href="#">page1</a></li><li><a href="#">page2</a></li></nav>和 CSS:
.wrapper{填充:20px;背景:#d3d3d3;高度:200px;}.菜单{背景:#7F7979;}.menu li{填充顶部:20px;填充底部:20px;左边距:15px;显示:内联块;}.menu li a{白颜色;}导航{列表样式:无;保证金:0填充:0;}
我想要实现的是在左右角看起来像是来自容器后面(如果我们可以这样称呼它,就像一个 3D 效果).没有尝试过任何东西,因为我不知道如何实现这一目标.
我用谷歌搜索了一下,但没有找到任何网站来检查代码.如果有人知道,请指出.
另外,我怎样才能通过忽略 container
padding
来做到这一点?是否可以在这个 container
中使用我的菜单来制作它,它有一个 padding
并且仍然迫使边距超出它?
注意:我不是要有人为我做这件事,我是想弄清楚我应该使用哪些 CSS
属性来实现我想要的.
为了更好地解释我想要什么:
如果有帮助,我的演示:
演示
非常感谢您为我指明了正确的方向.
解决方案 您可以在伪元素上使用边框来制作菜单栏左上角和右上角的 2 个较暗的三角形.
要使菜单栏比容器更宽,您可以使用负左/右外边距:
header{宽度:80%;边距:0 自动;背景:#D3D3D3;填充:100px 0 200px;}导航{位置:相对;高度:50px;背景:#7E7979;边距:0 -25px;}导航:之前,导航:之后{内容:'';位置:绝对;顶部:-10px;边框底部:10px 虚线 #5C5C5B;}导航:之前{左:0;左边框:25px 实心透明;}导航:之后{右:0;右边框:25px 实心透明;}
<nav></nav></header>
I have the following code for my menu:
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>
And the 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;
}
What I want to achieve is at the right and left corners to look like it comes from behind the container (like a 3D effect if we can call it this way). Haven't tried anything since I don't have any idea how to achieve this.
I googled a bit but didn't find any website to inspect the code. If someone knows any, please point me out.
And plus, how can I do this by ignoring the container
padding
? Is it possible to make it with my menu inside this container
which has a padding
and still forcing the margins to go outside it?
NOTE: I'm not trying to someone do this for me, I'm trying to figure out what CSS
properties should I use to achieve what I want.
To better explain what I wanted:
If it helps, my demo:
demo
Thank you so much for pointing me the right direction.
解决方案 You can use borders on pseudo elements to make the 2 darker triangles on the top left and right of your menu bar.
To make the menu bar wider than it's container, you can use negative left/right margins :
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>
这篇关于带有“3D"的功能区影响的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文