Need to put a text diagonally in box. using Css

Question

Hi can this be achieved using Css or Javascript? need this for a Birt report.

Answer 1

CSS:

.lbl{
     width: 80px;
    float:left;
    margin-left: -22px;
    transform:rotate(-50deg);
-ms-transform:rotate(-50deg); /* IE 9 */
-webkit-transform:rotate(-50deg); /* Opera, Chrome, and Safari */}
.inp {
    float: left;
    margin-top: 50px;
}

HTML

<input type='checkbox' id='cb1' class='inp'>
<div class='lbl'><label for='cb1'>first</label></div>

<input type='checkbox' id='cb2' class='inp'>
<div class='lbl'><label for='cb2'>second</label></div>

<input type='checkbox' id='cb3' class='inp'>
<div class='lbl'><label for='cb3'>third</label></div>

<input type='checkbox' id='cb4' class='inp'>
<div class='lbl'><label for='cb4'>fourth</label></div>

JSFIDDLE-DEMO