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 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

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

回答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.

回答3:

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

来源：https://stackoverflow.com/questions/5931496/diagonal-div-overlay

标签

javascript

css

cross-browser