带有“3D”色带的色带影响 [英] Ribbon with a "3D" effect

问题描述

我的菜单有以下代码：

HTML：

 < div class =container wrapper> 
< nav> 
< ul class =menu> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃> page1< / a>< / li> 
< li>< a href =＃> page2< / a>< / li> 
< / ul> 
< / nav> 
  

p>

  .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了一点，但没有找到任何网站来检查代码。如果有人知道，请指出我。

此外，我如何通过忽略容器 padding ？是否可以使用我的菜单里面这个容器，它有一个 padding ，并仍然强制边距到外面

我不想让别人为我这样做，我想弄清楚<$ c $

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

< img src =https://i.stack.imgur.com/gh8pQ.pngalt =corner>

如果有帮助，我的演示： p>

演示

$

解决方案

您可以在伪元素上使用边框使菜单栏左上角和右上角的两个较暗的三角形。

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

strong> DEMO

  header {width：80％; margin：0 auto;背景：＃D3D3D3; padding：100px 0 200px;} nav {position：relative; height：50px;背景：＃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>  

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 :

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>

这篇关于带有“3D”色带的色带影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！