rhedin rhedin - 12 days ago 5
HTML Question

CSS 3D effect banner

I am trying to figure out how to illustrate a banner that goes behind the body and continues in the background.

I want to achieve something like this:
enter image description here

But the difficult part is the wrap-around when it goes to the background (3D-effect).

This is what I got so far: https://jsfiddle.net/4v6xLtyf/

<body>
<div class="navbar background-banner">
</div>
<div class="body-content">
<div style="height:1000px" class="container content-block">
<h1 style="text-align: center">My Website</h1>

<div class="navbar navbar-inverse navbar-top navbar-custom-top">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Login</a></li>
</ul>
</div>
</div>
<p>Content goes here</p>
</div>
</div>
</body>

Answer

You can play with :before, :after and border to do the trick, something close to what you need could be adding the following CSS rules:

.navbar-custom-top:before {
    content: "";
    background-color: transparent;
    width: 30px;
    height: 50px;
    position: absolute;
    border-left: 25px solid transparent;
    border-top: 31px solid #bb5911;
    top: 50px;
    left:0;
}
.navbar-custom-top:after {
    content: "";
    background-color: transparent;
    width: 30px;
    height: 50px;
    position: absolute;
    border-right: 25px solid transparent;
    border-top: 31px solid #bb5911;
    top: 50px;
    right: 0;
}

Working fiddle

Then play with the size, position and colors to match exactly what you need.

Comments