сделать только видимая часть ссылки кликабельна

Question

Я пытаюсь сделать что-то вроде этого:

Если оба сторон кнопок кликабельны и ссылки на другой веб-сайт (есть предположение, какие из них, хе).

https://jsfiddle.net/3HG6d/1836/

Проблема у меня (как можно видеть в jsfiddle) является то, что верхний <a> тег всегда перекрывает второй, что делает только один кликабельным.

CSS:

a { 
    float:left; 
    margin:0.5%; 
    position:absolute; 
    display:inline-block; 
} 

/*Up-right pointing*/ 
.triangle-up-right { 
    width: 0; 
    height: 0; 
    padding-left:10%; 
    padding-top: 10%; 
    overflow: hidden; 
} 
.triangle-up-right:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-left:-500px; 
    margin-top:-500px; 

    border-left: 500px solid transparent; 
    border-top: 500px solid #4679BD; 
} 

/*Down-left pointing*/ 
.triangle-down-left { 
    width: 10%; 
    height: 0; 
    padding-bottom: 10%; 
    overflow: hidden; 
} 
.triangle-down-left:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    border-right: 500px solid transparent; 
    border-bottom: 500px solid #4679BD; 
} 

EDIT: должен показать правильный jsfiddle Теперь

Answer 1

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

This thread может быть полезным.

Answer 2

использовать карту и область метки.

http://www.w3schools.com/tags/tag_area.asp

использование поли и образует прямоугольник

Answer 3

Это работает для меня:

.social-button { 
 
    width: 80px; 
 
    height: 80px; 
 
    display: block; 
 
    margin: 20px; 
 
    border-radius: 12px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.social-button a { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
.twitter { 
 
    border-top: 0px solid transparent; 
 
    border-bottom: 80px solid transparent; 
 
    border-right: 80px solid #4679BD; 
 
} 
 
.facebook { 
 
    border-top: 80px solid transparent; 
 
    border-bottom: 0px solid transparent; 
 
    border-left: 80px solid #BD79BD; 
 
}

<div class="social-button"> 
 
    <a href="#" class="twitter"></a> 
 
    <a href="#" class="facebook"></a> 
 
</div>