Диагональный оверлей div

Question

Я пытаюсь получить диагональный div для некоторого контента.

У меня есть несколько полей выбора, которые я хотел бы отключить, используя свойство disabled, но мне бы хотелось, чтобы div сверху располагался со словом 'disabled', проходящим вдоль набора полей по диагонали (например, «продано» в недвижимости для распродажа знаков).

Есть ли кросс-браузерный способ достижения этого эффекта с помощью css?

Я не хочу использовать изображение для этого

Answer 1

Я бы просто использовал изображение для простоты, но если вы настаиваете:

См .: http://jsfiddle.net/yPRUN/

Это волшебствоинструмент, используемый для создания кросс-браузерного 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, проверьте блокировку элементов с помощью BlockUI .