การวางภาพที่มุมขวาบน - CSS

ฉันต้องการแสดงภาพที่มุมขวาบนของ div (รูปภาพเป็นริบบิ้น "เส้นทแยงมุม") แต่เก็บข้อความปัจจุบันไว้ใน div ภายในเช่นติดอยู่ที่ด้านบนสุด

ฉันลองสิ่งต่าง ๆ เช่นรวมภาพใน div อื่นหรือกำหนดคลาสของมันเช่น:

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

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

แต่ไม่มีโชค ผลลัพธ์ที่ดีที่สุดที่ฉันได้คือข้อความทั้งหมดเลื่อนลงเพื่อให้มีขนาดความสูงเท่ากันของรูปภาพ

ความคิดใด ๆ ?

คุณสามารถทำได้ดังนี้:

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

วางตำแหน่งที่divค่อนข้างและวางตำแหน่งริบบิ้นไว้ด้านในสุด สิ่งที่ต้องการ:

#content {
  position:relative;
}

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

ในขณะที่มองปัญหาเดียวกันฉันพบตัวอย่าง

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

เคล็ดลับคือการสร้างขนาดเล็ก (ฉันใช้ GIMP) PNG (หรือ GIF) ที่มีพื้นหลังโปร่งใส (จากนั้นลบมุมด้านล่างตรงข้าม)