Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Треугольная ссылка (https://javascript.ru/forum/xhtml-html-css/49293-treugolnaya-ssylka.html)

hfts_rider 06.08.2014 12:20

Треугольная ссылка
 
Подскажите пожалуйста, можно ли сделать как то треугольную ссылку без использования трансформации?

Вот как сделать допустим бордерами треугольник, я знаю, но как сделать так что бы та прозрачная часть бордера не была ссылкой, я хз...

Возможно ли это?



Вот допустим с трансформацией это реально, повернуть блоки и будет почти то что нужно, а как то без?

Octane 06.08.2014 12:26

http://htmlbook.ru/html/area

hfts_rider 06.08.2014 12:33

аа, точно как же я забыл про мап...
Спасибо!

hfts_rider 06.08.2014 12:43

А как можно сделать это резиново?
Только через js?

Octane 06.08.2014 13:00

Наверное, достаточно изменять значение атрибута coords элемента area по событию resize. Может быть лучше сделать с помощью SVG или надо совсем кросс-браузерно?

Pavel M. 06.08.2014 13:45

> А как можно сделать это резиново?

первая мысль пришла,
что можно просто выше ссылки поставить пару повернутых на 45 градусов элементов и все делать в процентах

типа http://jsbin.com/zisadiba/1/edit

Octane 06.08.2014 14:25

ТС просил без трансформации
Цитата:

Сообщение от hfts_rider
Вот допустим с трансформацией это реально, повернуть блоки и будет почти то что нужно, а как то без?


Pavel M. 06.08.2014 15:36

тогда, может быть без трансформации
просто выше ссылки поставить пару скругленных элементов
только большого радиуса?

размер этих кругов я сделал только 1000%
думаю, если в несколько раз увеличить, то кривизна будет практически незаметна?

http://jsbin.com/ropiqazo/1/edit

Aetae 06.08.2014 19:42

Если цвет фона или ссылки однородный, то делается это элементарно:
<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>

Pavel M. 07.08.2014 14:55

У меня в Хроме последнем
все и зеленая стрелки и прозрачные бордеры является ссылкой
???


Часовой пояс GMT +3, время: 07:02.