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

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

• javascript
• css
• cross-browser

Share Improve this question Follow edited May 9, 2011 at 1:13 qwertymk asked May 9, 2011 at 1:06 qwertymkqwertymk 35.4k3030 gold badges124124 silver badges184184 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

See: http://jsfiddle/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 ments.

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

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.

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