CSS pour le coin supérieur droit de la page

Question

Comment aurais-je un coin supérieur droit tel que montré dans l'image. Je veux faire quelque chose de similaire mais pas exactement pareil. Je pense que le texte n'est pas une image.

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

Aussi, j'ai vu quelques sites Web qui a un effet de vol stationnaire page quand une souris est au-dessus de la partie supérieure droite. Une idée de comment faire ça?

Answer 1

Si le texte n'est pas une image, aucune des autres réponses ne fonctionnera. Voici quelques css qui tourne une div 45 degrés et travaille dans 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

Je suppose que vous voulez un positionnement fixe.

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

Answer 3

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

Cela assignera une division à la classe définie comme « topRight » au coin supérieur droit. Je suis sûr que vous pouvez comprendre comment faire apparaître l'image correctement à partir de cela. Assurez-vous de définir la largeur et la hauteur appropriées. En ce qui concerne le vol stationnaire, quels effets précis voulez-vous? Vous pouvez modifier facilement le CSS sur le vol stationnaire, si c'est tout ce que vous voulez faire.

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

Answer 4

Assurez-vous qu'il est un PNG transparent

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

(Un élément dont l'ordre de la pile est toujours en face d'un élément avec un ordre de pile faible.)

Answer 5

vous pouvez prendre un coup d'oeil à ce 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>