html - Web ページの CSS でヘッダー バーを折りたたむ方法

Question

誰かがCSSコードを教えてくれるか、この効果を達成する方法についてのチュートリアルを教えてください. これが私が話していることのイメージです：

注: 私はアブソリュートで配置する方法を知っています。それらがどのように効果を発揮するかを知る必要があるだけです。

Answer 1

リボンが問題の場合は、空の ( 0-size ) 要素 (疑似要素で追加できます:after) に境界線を使用します。

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/