Jak zrobić pasek nagłówka spasować na stronie internetowej css

Question

Czy ktoś może mi powiedzieć kod CSS lub wskaż mi samouczek, jak osiągnąć ten efekt zobaczyć cały czas. Oto obraz tego, co mówię:

Uwaga: Wiem jak pozycjonować z absolutną Muszę tylko wiedzieć, w jaki sposób wyciągnąć efekt off.

Answer 1

Jeśli taśma jest problem, a następnie użyć granice na pusty (0-size) elementu (które można dodać z :after pseudo-elementu) ..

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 nahttp://jsfiddle.net/gaby/zJPhy/

Answer 2

To może być umieszczony stosunkowo lub całkowicie - można to zrobić na dwa sposoby:

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

Albo absolutnie:

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

pamiętać, że absolutnie pozycjonowane elementy zostaną ustawione zgodnie z rzutni jeżeli nie mają ustawionych przodków.

Złożoną część można wykonać za pomocą obramowań na pseudoelementie :before lub :after.

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