How to make a triangular shaped link without using image map? - html

Question

What I am trying to do was keeping an anchor in my html which should be triangular shape and should be able to click only in that triangular portion but I am not supposed to use image map can anyone please suggest me a solution
Note : I know about CSS shapes but they are clickable in complete block. I just want it to be clickable in a tringle shape.

Answer 1

YES it is possible see the demo
You need this html:
<div id="link"> // Wrapper
<div id="square1"></div> // rotated square to cover the extra are
<a id="triangle-up" href="#"></a> // actual link
<div id="square2"></div> // rotated square to cover the extra are
</div>
CSS:
#link {
width:110px;
height:100px;
overflow:hidden;
margin:auto;
position:relative;
}
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position:absolute;
top:0px;
left:10px;
}
#square1 {
z-index: 10;
position: absolute;
display: inline-block;
width: 50px;
height: 110px;
// background: blue;
top: -16px;
left: -12px;
transform: rotate(26deg);
-ms-transform: rotate(26deg);/* IE 9 */
-webkit-transform: rotate(26deg); /* Safari and Chrome */
-o-transform: rotate(26deg); /* Opera */
-moz-transform: rotate(26deg); /* Firefox */
}
#square2 {
z-index: 10;
position: absolute;
display: inline-block;
width: 50px;
height: 110px;
// background: blue;
top: -16px;
left: 82px;
transform: rotate(-26deg);
-ms-transform: rotate(-26deg);/* IE 9 */
-webkit-transform: rotate(-26deg); /* Safari and Chrome */
-o-transform: rotate(-26deg); /* Opera */
-moz-transform: rotate(-26deg); /* Firefox */
}