ヘッダーバーをウェブページ上で折り畳む方法

Question

誰かがCSSコードを教えてもらえますか、このエフェクトを達成する方法についてのチュートリアルを常に教えてください。ここ は、私が話しているかの画像です：

注：私は、私はちょうど彼らが影響をやってのける方法を知っておく必要があり、絶対に配置する方法を知っています。

Answer 1

場合は、（あなたは:after擬似要素に追加することができます）空（0サイズ）要素の境界線を使用。..

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; 
} 

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

Answer 2

これは比較的に配置することができる、または絶対に - それはどちらの方法でも行うことができます。

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

または絶対：絶対配置の要素があれば、ビューポートに応じて配置されます

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

注意祖先は存在しません。

折り返し部分は、擬似要素:beforeまたは:afterの枠線を使用して実現できます。

デモ：リボンが問題であるhttp://jsfiddle.net/MaepP/2/