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.

Answer 2

You can use absolute positioning. It would be something like this:

http://jsfiddle.net/myajouri/389hQ/

.green-box {
  position: relative;
  /* other styles */
}

.green-box:before,
.green-box:after {
  content: "";
  display: block;
  position: absolute;
  width: 100px;  /* ...or whatever */
  height: 50px; /* ...or whatever */
}

.green-box:before {
  top: 0;
  left: 0;
  background-image: url("wherever the ribbon image is") left top no-repeat;
}

.green-box:after {
  bottom: 0;
  right: 0;
  background-image: url("wherever the ribbon image is") right bottom no-repeat;
}

This should work in IE8 and above + modern browsers. If you don't care about IE8 then you can use CSS transforms to rotate the same image instead of having two different images.

Answer 3

Try to use position: fixed; via CSS