Javascript 对角div覆盖

我正试图在一些内容上获得一个对角线div

我想使用disabled属性禁用一些选择框，但我想在顶部有一个div，上面有单词

“disabled”

，沿着字段集对角移动（如待售房地产标志上的“sell”）

有没有跨浏览器的方法可以通过css实现这种效果

---

我不想使用图像来实现这一点

如果您对jQuery很感兴趣，请查看

如果您对jQuery很感兴趣，请查看

是的。。。使用位于字段集前面的图像，图像的位置为

position:absolute

。在这种情况下，这可能是跨浏览器所能做到的。

是的。。。使用位于字段集前面的图像，图像的位置为

position:absolute

。在这种情况下，这可能是跨浏览器所能做到的。

为了简单起见，我可能会选择图像，但如果您坚持：

请参见：

如果您想做任何更改，您将需要它

当然，您应该将IE CSS放在新样式表中，并将其包含在条件注释中

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

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

---

为了简单起见，我可能会选择图像，但如果你坚持：

请参见：

如果您想做任何更改，您将需要它

当然，您应该将IE CSS放在新样式表中，并将其包含在条件注释中

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

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

---

我不希望使用图像来做这件事，因为您指定了“跨浏览器”。如果你想要对角线，唯一的跨浏览器方式是使用图像，除非你同意排除IE和Firefox的所有版本。是的，只要它在内容顶部分解成一个普通的平面文本。如果在不受支持的浏览器中，它只是正常显示文本，那就好了，然后尝试转换（以及-moz-transform和-webkit-transform和-o-transform等）我不希望使用图像来完成这项工作，因为您指定了“跨浏览器”。如果您想要对角线，唯一的跨浏览器方式是使用图像，除非您同意排除所有IE版本和旧版本的Firefox。是的，只要它在内容顶部分解成常规的平面文本。如果在不受支持的浏览器中，它只是正常显示文本，那么这很好，然后尝试转换（和-moz转换和-webkit转换和-o转换等）