Colocar una imagen en la esquina superior derecha-CSS

Necesito mostrar una imagen en la esquina superior derecha de un div (la imagen es una cinta "diagonal") pero manteniendo el texto actual contenido en un div interno, pegado en la parte superior de él como en este momento.

Probé diferentes cosas como incluir la imagen en otro div o definir su clase como: 

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

Pero sin suerte. El mejor resultado que obtuve fue todo el texto desplazado hacia abajo para el mismo tamaño de altura de la imagen.

Alguna idea?

 96
csshtml
Author: Randomize, 2011-09-02
Source

3 answers

Puedes hacerlo así:

#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>
 177
Author: Rok Kralj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-05 22:13:23

Coloque la div relativamente, y coloque la cinta absolutamente dentro de ella. Algo como:

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}
 23
Author: Gary Chambers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-02 10:38:12

Mientras miraba el mismo problema, encontré un ejemplo 

<style type="text/css">
#topright {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(TRbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}
</style>

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

El truco aquí es crear un pequeño, (usé GIMP) un PNG (o GIF) que tenga un fondo transparente, (y luego simplemente eliminar la esquina inferior opuesta.)

 4
Author: Alexx Roche,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-09 08:45:09