Top left and bottom right ribbons

Question

I am trying to get a ribbon png on the top left and bottom right of a box, (refer to the picture below), but was unsuccessful.

That box has a background colour and it's going to have some text in it so the ribbons need to keep their position whenever the box stretches. This seems to be so easy to do so hope someone could help me out.

Answer 1

Use absolute positioning to put two divs in with top:0;left:0; and bottom:0;right:0;. Like this in your CSS:

#box{
    position:relative;
    /* your styles... */
}
#box:before,#box:after{
    content:'';
    position:absolute;
    width:100px;height:50px;
}
#box:before{
    top:0;left:0;
    background:#0f0; /* you could put some kind of image here */
}
#box:after{
    bottom:0;right:0;
    background:#0f0; /* you could put some kind of image here */
}

See this JSFiddle for a working demo.