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

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 */
}