如何製作一個標題欄摺疊在網頁上css

Question

有人可以告訴我的CSS代碼或指向我一個關於如何實現這種效果的教程看到所有的時間。 以下是我在談論的形象：

注：我知道如何與絕對我只需要知道他們是怎麼拉的效果關閉定位。

Answer 1

如果色帶是問題，然後使用邊界空（0尺寸）元素（您可以與: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/