CSS für die obere rechte Ecke der Seite

Question

Wie hätte ich eine obere rechte Ecke div wie im Bild gezeigt. Ich möchte etwas Ähnliches tun, wenn auch nicht genau das Gleiche. Ich denke, der Text ist kein Bild.

alt text http://i41.tinypic.com/2ibgbgj.jpg

Auch habe ich einige Websites gesehen, die eine Seite Hover-Effekt hat, wenn eine Maus über den rechten oberen Abschnitt ist. Irgendeine Idee, wie man das macht?

Answer 1

Wenn der Text kein Bild ist, funktioniert keine der anderen Antworten. Hier sind einige CSS, die eine div 45 Grad dreht und arbeitet in IE + FF + Webkit.

#yourdiv 
{ 
    top: 0px; 
    right: 0px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476', M12='-0.7071067811865475', M21='0.7071067811865475', M22='0.7071067811865476', sizingMethod='auto expand'); 
} 

Answer 2

Ich nehme an, Sie wollen feste Positionierung.

#Element { 
    position: fixed; 
    top:0; 
    right:0; 
} 

Answer 3

div.topRight { 
    position: absolute; 
    top: 0%; 
    right: 0%; 
} 

Dies wird eine Division mit Klasse festgelegt als ‚topRight‘ an der rechten oberen Ecke zuweisen. Ich bin mir sicher, dass du herausfinden kannst, wie man das Bild richtig erscheinen lässt. Stellen Sie sicher, dass Sie die richtige Breite und Höhe einstellen. Was für Effekte hast du im Schwebezustand? Sie können das CSS bei Hover einfach ändern, wenn Sie nur das möchten.

div.topRight:hover { 
    // new css rules 
} 

Answer 4

Stellen Sie sicher, es ist ein transparentes PNG ist

#Element { 
    position: fixed; 
    top:0; 
    right:0; 
z-index:10; 
} 

(Ein Element mit größerer Stapelordnung ist immer vor einem Element mit einem unteren Stapelordnung.)

Answer 5

Sie möchten nehmen ein Blick auf diese JSFiddle:

Css:

.wrapper { 
    margin: 50px auto; 
    width: 280px; 
    height: 370px; 
    background: white; 
    border-radius: 10px; 
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    box-shadow:   0px 0px 8px rgba(0,0,0,0.3); 
    position: relative; 
    z-index: 90; 
} 

.ribbon-wrapper-green { 
    width: 85px; 
    height: 88px; 
    overflow: hidden; 
    position: absolute; 
    top: -3px; 
    right: -3px; 
} 

.ribbon-green { 
    font: bold 15px Sans-Serif; 
    color: #333; 
    text-align: center; 
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform:  rotate(45deg); 
    -o-transform:  rotate(45deg); 
    position: relative; 
    padding: 7px 0; 
    left: -5px; 
    top: 15px; 
    width: 120px; 
    background-color: #BFDC7A; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:  -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:  -o-linear-gradient(top, #BFDC7A, #8EBF45); 
    color: #6a6340; 
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
    box-shadow:   0px 0px 3px rgba(0,0,0,0.3); 
} 

.ribbon-green:before, .ribbon-green:after { 
    content: ""; 
    border-top: 3px solid #6e8900; 
    border-left: 3px solid transparent; 
    border-right: 3px solid transparent; 
    position:absolute; 
    bottom: -3px; 
} 

.ribbon-green:before { 
    left: 0; 
} 
.ribbon-green:after { 
    right: 0; 
} 

html:

<div class="wrapper"> 
     <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div> 
</div>