Diagonal div overlay

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

score 5 · Accepted Answer · answered May 09 '11 at 01:35

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

score 1 · Answer 2 · answered May 09 '11 at 01:08

1

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.

answered May 09 '11 at 01:08

Ry-

218,210
55
464
476

I'd prefer not to use an image to do this – qwertymk May 09 '11 at 01:13
Well, you specified "cross-browser". If you want something diagonal, the only cross-browser way is to use an image, unless you're OK with excluding every version of IE and older versions of Firefox. – Ry- May 09 '11 at 01:17
Yeah as long as it breaks into a regular flat text on top of the content – qwertymk May 09 '11 at 01:22
If in unsupported browsers it just displays the text normally then that's fine – qwertymk May 09 '11 at 01:27
Okay, then try transform http://24ways.org/2009/going-nuts-with-css-transitions (and -moz-transform and -webkit-transform and -o-transform etc.) – Ry- May 09 '11 at 01:29

score 0 · Answer 3 · answered May 09 '11 at 01:08

0

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

answered May 09 '11 at 01:08

Kon

27,113
11
60
86

Diagonal div overlay

3 Answers3

Linked