Diagonal Div Overlay

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

Solution 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);
}

Solution 2:

Yes... use an image with position: absolute positioned before the fieldset. That's probably about as cross-browser as you can do in that situation.

Solution 3:

If you are cool with jQuery, check out element blocking with BlockUI.