对角线div覆盖 [英] Diagonal div overlay

问题描述

我有一些选择框，我想禁用，使用disabled属性，但我想要在顶部有一个div，沿着字段对角线（如在房地产销售标志上的已售出），'disabled'。

有没有任何跨浏览器的方法来实现这个效果与css？

我不想使用图像做这个

解决方案

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

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

这是用于生成跨浏览器CSS的神奇工具。 a>

如果您要进行任何更改，您将需要它。

您应该将IE CSS放在一个新的样式表中，

 
 code>< div class =disabled> disabled< / div> 
 
<！ -  [if IE]> 
< style> 
 .disabled {
 
 / * IE8 +  - 必须在一行，不幸的是* / 
 -ms-filter：progid：DXImageTransform.Microsoft.Matrix（M11 = 0.7071067811865473， M12 = -0.7071067811865477，M21 = 0.7071067811865477，M22 = 0.7071067811865473，SizingMethod ='auto expand'）; 
 
 / * IE6和7 * / 
 filter：progid：DXImageTransform.Microsoft.Matrix（
 M11 = 0.7071067811865473，
 M12 = -0.7071067811865477，
 M21 = 0.7071067811865477，
 M22 = 0.7071067811865473，
 SizingMethod ='auto expand'）; 
 
 / * 
 *使转换原点位于
 *对象的中间。 
 * / 
 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）; 
} 
  

I'm trying to get a diagonal div across some content.

I have some select boxes that I would like to disable, using the disabled property, but I would like to have a div on top with the word 'disabled' going along the fieldset diagonally (like 'sold' on real estate for sale signs).

Is there any cross browser way to achieve this effect with css?

I don't want to use an image to do this

解决方案

I'd probably just go with an image for simplicity, but if you insist:

See: http://jsfiddle.net/yPRUN/

This is the magical tool used to generate the cross-browser CSS.
You'll need it if you want to make any changes.

You should of course put the IE CSS inside a new stylesheet and include it inside the conditional comments.

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

这篇关于对角线div覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！