对角线div覆盖

我想要获得跨某些内容的对角线div。对角线div覆盖

我有一些选择框，我想禁用，使用禁用的属性，但我想有一个顶部的单词'disabled'对角沿着字段集（像'出售'的房地产出售迹象）。

是否有任何跨浏览器的方式来实现这种效果与CSS？

我不想用图像来做到这一点

来源

2011-05-09 qwertymk

我可能只是去与简单的图像，但如果你坚持：

参见：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); 
}

来源

2011-05-09 01:35:38 thirtydot

如果你很酷的jQuery，退房element blocking with BlockUI。

来源

2011-05-09 01:08:16 Kon

是...使用位于字段集前的position: absolute图像。这可能与您在这种情况下可以做的跨浏览器有关。

来源

2011-05-09 01:08:46 Ryan

我不希望用图像来做到这一点 – qwertymk 2011-05-09 01:13:45

嗯，你指定的 “跨浏览器”。如果你想要对角线的东西，唯一的跨浏览器的方式是使用图像，除非你排除每个版本的IE和Firefox的老版本。 – Ryan 2011-05-09 01:17:45

是的，只要它在内容之上打破常规的平面文字 – qwertymk 2011-05-09 01:22:57

对角线div覆盖

回答

相关问题