Placer une image dans le coin supérieur droit - CSS

J'ai besoin d'afficher une image dans le coin supérieur droit d'un div (l'image est un ruban "diagonal") mais en gardant le texte actuel contenu dans un div interne, comme collé en haut de celui-ci.

J'ai essayé différentes choses comme inclure l'image dans un autre div ou définir sa classe comme:

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

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

mais sans aucune chance. Le meilleur résultat que j'ai obtenu est que tout le texte défile vers le bas pour la même taille de hauteur de l'image.

Une idée?

Vous pouvez simplement le faire comme ceci:

#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>

Positionnez le divrelativement et positionnez le ruban absolument à l'intérieur. Quelque chose comme:

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}

En regardant le même problème, j'ai trouvé un exemple

<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>

L'astuce ici est de créer un petit, (j'ai utilisé GIMP) un PNG (ou GIF) qui a un arrière-plan transparent, (puis supprimez simplement le coin inférieur opposé.)