CSS para la esquina superior derecha de la página

Question

¿Cómo puedo tener una div esquina superior derecha como se muestra en la imagen. Quiero hacer algo similar, aunque no exactamente lo mismo. Creo que el texto no es una imagen

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

Además, he visto algunos sitios web que tiene un efecto estacionario página cuando el ratón está sobre la parte superior derecha. ¿Alguna idea de cómo hacerlo?

Answer 1

Si el texto no es una imagen, ninguna de las demás respuestas funcionará. Aquí hay algunos css que rotan un div 45 grados y funcionan en 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

Supongo que quiere un posicionamiento fijo.

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

Answer 3

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

Esto asignará una división con la clase indicada como 'topright' a la esquina superior derecha. Estoy seguro de que puedes descubrir cómo hacer que la imagen se muestre correctamente a partir de eso. Asegúrese de establecer el ancho y la altura adecuados en él. En cuanto a suspender, ¿qué efectos exactos quieres? Puede modificar el CSS al pasar el mouse fácilmente, si eso es todo lo que quiere hacer.

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

Answer 4

Asegúrese de que es un PNG transparente

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

(Un elemento con mayor orden de apilamiento está siempre delante de un elemento con un orden de apilamiento inferior.)

Answer 5

es posible que desee tomar un vistazo a este 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>