Блог

Главная - Вопросы по программированию - Наложение div по диагонали

Наложение div по диагонали

#javascript #css #cross-browser

#javascript #css #кроссбраузерный

Вопрос:

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

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

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

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

Ответ №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);
}

Ответ №2:

ДА… используйте изображение, position: absolute расположенное перед набором полей. Это, вероятно, настолько кроссбраузерно, насколько вы можете сделать в этой ситуации.

Комментарии:

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

2. Ну, вы указали «кроссбраузерный». Если вам нужно что-то диагональное, единственный кроссбраузерный способ — использовать изображение, если только вы не согласны исключить все версии IE и более старые версии Firefox.

3. Да, если оно разбивается на обычный плоский текст поверх содержимого

4. Если в неподдерживаемых браузерах он просто нормально отображает текст, тогда все в порядке

5. Хорошо, тогда попробуйте преобразовать 24ways.org/2009/going-nuts-with-css-transitions (и -moz-transform, и -webkit-transform, и -o-transform и т.д.)

Ответ №3:

Если вы хорошо разбираетесь в jQuery, проверьте блокировку элементов с помощью BlockUI.