Question

我正试图在某些内容中获得对角线。

我有一些我想要禁用的选择框，使用禁用的属性，但我希望在对角线上沿着字段集显示单词'disabled'的div（就像'实际出售'一样房地产待售标志）。

是否有任何跨浏览器方式来实现css的效果？

我不想使用图像来执行此操作

Answer 1

我可能只是为了简单而使用图片，但如果你坚持：

请参阅： http://jsfiddle.net/yPRUN/

This is the magical tool used to generate the cross-browser CSS.
如果你想做任何改变，你需要它。

当然，您应该将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]-->

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

Answer 2

是...使用位于字段集前面的position: absolute图片。在那种情况下，这可能与跨浏览器一样。

Answer 3

如果你对jQuery很酷，请查看element blocking with BlockUI。

对角线div叠加

3 个答案: