javascript - 对 Angular 线 div 叠加

Question

我正在尝试在某些内容上设置对 Angular 线 div。

我有一些我想禁用的选择框，使用 disabled 属性，但我想在顶部有一个 div，单词 'disabled' 沿着字段集对 Angular 线(比如在房地产上“出售”以出售标志)。

有没有跨浏览器的方法可以用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);
}