|
аа, точно как же я забыл про мап...
Спасибо! |
А как можно сделать это резиново?
Только через js? |
Наверное, достаточно изменять значение атрибута coords элемента area по событию resize. Может быть лучше сделать с помощью SVG или надо совсем кросс-браузерно?
|
> А как можно сделать это резиново?
первая мысль пришла, что можно просто выше ссылки поставить пару повернутых на 45 градусов элементов и все делать в процентах типа http://jsbin.com/zisadiba/1/edit |
ТС просил без трансформации
Цитата:
|
тогда, может быть без трансформации
просто выше ссылки поставить пару скругленных элементов только большого радиуса? размер этих кругов я сделал только 1000% думаю, если в несколько раз увеличить, то кривизна будет практически незаметна? http://jsbin.com/ropiqazo/1/edit |
Если цвет фона или ссылки однородный, то делается это элементарно:
<style>
.a1 {
position: relative;
width: 200px;
height: 200px;
display: block;
background: #0f0 !important;
}
.a1::before{
content: '';
position: absolute;
bottom:0;
width: 0px;
height: 0px;
border-left:100px solid #fff;
border-right:100px solid #fff;
border-top:100px solid transparent;
}
.a2 {
position: relative;
width: 200px;
height: 100px;
display: block;
background: #0f0 !important;
margin-bottom: 100px;
}
.a2::before{
content: '';
position: absolute;
bottom:-100px;
width: 0px;
height: 0px;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid #0f0;
}
</style>
<a class="a1" href=http://mybook.ru>это ссылка</a>
<a class="a2" href=http://mybook.ru>это ссылка</a>
|
У меня в Хроме последнем
все и зеленая стрелки и прозрачные бордеры является ссылкой ??? |
| Часовой пояс GMT +3, время: 18:44. |