html - CSS Upward Ribbon

Question

So basically I'm creating a navigation bar (seen below) and I want to know if it's possible to create an upward ribbon type of thing.

Ignore the badly designed rest of the navigation, but I simply want the right part, the upward ribbon. Is it possible to do so, and preferably without images? I'm fine working with them, but I prefer it without.

Any help would gladly be appreciated, and thank you in advance.

Answer 1

Try something like this. It is pure HTML and CSS, and you can change the bar and ribbon height.

Fiddle

HTML

<div id='wrapper'>
    <div id='bar'>This is the bar</div>
    <div id='corner'><div id='ribbon'></div></div>
</div>

CSS (I have explained how I got all the numbers in /* comments */)

#bar {
    background-color: blue;
    color: white;
    width: 70%;
    float: left;
    height: 30px; /* bar height */
}
#corner {
    width: 0; 
    height: 0; 
    border-top: 30px solid blue; /* bar height */
    border-right: 30px solid transparent; /* bar height */
    float: left;
}
#ribbon {
    height: 10px; /* ribbon height */
    margin-top: -40px; /* bar height + ribbon height */
    background-color: green;
    width: 30px; /* bar height */
}
#wrapper {
    margin-top: 20px; /* ribbon height + 10px padding */
}