Треугольная ссылка

[hfts_rider]

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

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

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



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

[Octane]

http://htmlbook.ru/html/area

[hfts_rider]

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

[hfts_rider]

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

[Octane]

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

[Pavel M.]

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

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

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

[Octane]

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

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

[Pavel M.]

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

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

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

[Aetae]

Если цвет фона или ссылки однородный, то делается это элементарно:

<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.]

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