對角線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覆蓋

回答

相關問題