Diagonal Overlay with Text (DIV/CSS)

Let's say I have a div of a fixed width and a border, making it appear
as a simple square. I would like to create an effect where I overlay a
diagonal red band (width about 80) attaching one edge of the square to
another edge (say the left edge to the top edge). I would like to be
able to write text along this diagonal axis on the red band, and have
it somewhat opaque so I can view a bit of what's behind it.

Can this be done with pure CSS? Or would I need to create an image and
overlay it? If you have a CSS solution for this, or know of a site that
does it or has an example, please share. Thanks!