Question

I’m trying to get a diagonal div across some content.

I have some select boxes that I would like to disable, using the disabled property, but I would like to have a div on top with the word 'disabled' going along the fieldset diagonally (like ‘sold’ on real estate for sale signs).

Is there any cross browser way to achieve this effect with css?

I don’t want to use an image to do this

Answer 1

I’d probably just go with an image for simplicity, but if you insist:

See: http://jsfiddle.net/yPRUN/

This is the magical tool used to generate the cross-browser CSS.
You’ll need it if you want to make any changes.

You should of course put the IE CSS inside a new stylesheet and include it inside the conditional comments.

HTML:

<div class="disabled">disabled</div>

<!--[if IE]>
<style>
.disabled {   

    /* IE8+ - must be on one line, unfortunately */    
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865473, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865473, SizingMethod='auto expand')";      

    /* IE6 and 7 */    
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.7071067811865473,            
        M12=-0.7071067811865477,
        M21=0.7071067811865477,            
        M22=0.7071067811865473,            
        SizingMethod='auto expand');   

    /*    
    * To make the transform-origin be the middle of    
    * the object.      
    */   
    margin-left: 2px;    
    margin-top: -34px;
}
</style>
<![endif]-->

CSS:

.disabled {
    background: red;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-weight: bold
}

.disabled {     
    width:             100px;     
    height:            30px;     
    -moz-transform:    rotate(45deg);     
    -o-transform:      rotate(45deg);     
    -webkit-transform: rotate(45deg);     
    transform:         rotate(45deg);
}