Форум

Freakmeister · #1 (**permalink**) 30.06.2012, 17:29

Есть задумка сделать ряд кнопок в форме параллелограмма: http://jsfiddle.net/zk39m/10/
Синей областью я выделил то, что кликаться не должно. Но оно кликается. Реально ли сделать ссылку полу-прозрачной под контур картинки?
Пробовал ещё так - один фиг: http://jsfiddle.net/zk39m/8/

Deff · #2 (**permalink**) 30.06.2012, 17:30

Freakmeister,
Делайте мап картой - Пример стрелочкой => http://hostjs-mybb2011.narod.ru/JamoperPost.htm

dmitriymar · #3 (**permalink**) 30.06.2012, 17:34

А CSS 3 не?)

melky · #4 (**permalink**) 30.06.2012, 18:27

и ради этого делать картинку ?!

<style>
#parallelogramm {

    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    transform: skewX(-45deg);

    zoom: 1;
    position: absolute;
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M21=0.0, M12=-1.0, M22=1.0, SizingMethod='auto expand');

    left: 50px; top: 50px;

    background-color: red;
    width: 100px;
    height: 50px;
   
    cursor: pointer;
}
</style>
<div id="parallelogramm" onmousedown="this.style.backgroundColor='green'" onmouseup="this.style.backgroundColor='red'"></div>

Deff · #5 (**permalink**) 30.06.2012, 18:31

melky,
Для пущности нун cursor: pointer; вставить

Ксать - Вопрос: - а пристыковка двух друг другу диагоналями (с раздвигом в пару пиксел) - Проходит ?

melky · #6 (**permalink**) 30.06.2012, 18:32

Сообщение от Deff

melky,
Для пущности нун cursor: pointer; вставить

та хрен с ним

щас поставлю

Deff · #7 (**permalink**) 30.06.2012, 18:44

<style>
.parallelogramm {

    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    transform: skewX(-45deg);

    zoom: 1;
    position: relative;
    margin-left: 12px; 
    float:left;
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M21=0.0, M12=-1.0, M22=1.0, SizingMethod='auto expand');

    background-color: red;
    width: 100px;
    height: 50px;
   
    cursor: pointer;
}
</style>
<body style="padding:23px;">
<div class="parallelogramm" onmousedown="this.style.backgroundColor='green'" onmouseup="this.style.backgroundColor='red'"></div><div <div class="parallelogramm"  onmousedown="this.style.backgroundColor='green'" onmouseup="this.style.backgroundColor='red'"></div>
</body>

Гы - норма
(*melky,
Зато такого нет => http://uploads.ru/?v=0OskH.png

melky · #8 (**permalink**) 30.06.2012, 18:48

Сообщение от Deff

Гы - норма

надо с hasLayout в IE разобраться. этот пример в нём нормально смотрится? мой - да.

щас лень ноут включать

Deff · #9 (**permalink**) 30.06.2012, 18:50

Сообщение от melky

этот пример в нём нормально смотрится? мой - да.

Норма ток в Ие нун обертывать в span inline-block для div inline - кривит сдвижку

Freakmeister · #10 (**permalink**) 30.06.2012, 21:48

Протестил трансформ - он искажает background-image, так что для моих целей не вариант.) Завтра буду курить карту.

Форум

Справочник

Discord чат

Курсы javascript