Responsive Ribbon

Responsive ribbon using background images. The corners could also be achieved with CSS3.

by jack_pallot

HTML

<div id="wrapper"> <!-- wrapper has a max-width (10px less than the menu width) --->

    <div class="container short"></div> <!--- container width 100% --->
    <nav id="menu"></nav> <!--- container max-width 700px --->
    <div class="container long"> <!--- container width 100% --->
        <img src="http://placekitten.com/690/300"/>
    </div>
    
</div>

CSS

/* GENERIC */

body {
    background: #ccc;
}

img {
    width: 100%;
}

/* DEMO CONTAINERS */

.short {
    height: 100px;
}

.long {
   height: 400px;
}

#wrapper {
    max-width: 690px;
}

.container {
    width: 98.5%;
    margin: 0 auto;
    background: #fff;

}

/* NAVIGATION BAR */

#menu:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 5px;
    height: 57px;
    background-color: #981140;
    background: url('http://j-p.im/1bCHO2g');
    background-repeat: no-repeat;
    background-position: left bottom;
}
#menu:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 5px;
    height: 57px;
    background-color: #981140;
    background: url('http://j-p.im/12syMFz');
    background-repeat: no-repeat;
    background-position: left bottom;
}

#menu {
    position: relative;
    top: 0;
    left: 0;
    max-width: 700px;
    background: #981140;
    height: 49px;
}