CSS Upward Ribbon

Попробуйте что-то вроде этого. Это чистый HTML и CSS, и вы можете изменить высоту бара и ленты.

скрипка

HTML

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

CSS (я объяснил, как я получил все числа в /* 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 */
}