How to make header bar fold in css web page

Question

Can someone please tell me the CSS code or give me a tutorial on how to achieve this effect, see all the time. Here is an image of what I'm talking about:

Note. I know how to position with absolute. I just need to know how they cause an effect.

Answer 1

If the problem is with the ribbon, use the borders for the empty (0-dimensional) element (which you can add with the :after pseudo-element).

Html

 <div id="content"> <div id="ribbon"></div> </div> 

CSS

 #content{ background-color:#77c; width:300px; height:200px; position:relative; } #ribbon{ position:absolute; width:80px; height:30px; right:-20px; top:50px; background-color:#999; } #ribbon:after{ content:''; width:0; height:0; border-color: transparent transparent #666 #666; border-style:solid; border-width:5px 10px; position:absolute; right:0; top:-10px; } 

Demo at http://jsfiddle.net/gaby/zJPhy/

Answer 2

It can be positioned relatively or absolutely - it can be done in any case:

 #item { position: relative; right: -10px; /* moves it 10px to the right */ } 

Or absolutely:

 #item { position: absolute: top: 20px; /* 20px from the top */ right: -20px; /* 20px off the right edge */ } 

Please note that absolutely positioned elements will be arranged in accordance with the viewport if they do not have positioned ancestors.

The folded part can be done using borders on the :before or :after pseudo-element.

Demo: http://jsfiddle.net/MaepP/2/