重叠CSS锚三角形

Question

我正在尝试构建一个包含重叠三角形的导航菜单。

我将锚区域限制为像this这样的三角形。它就像一个魅力，好吧。

然后，当我重叠这些三角形时，我突然无法正确点击它。
    see example

HTML：

<nav>

            <div class="link select-A">
            <div class="square1"></div>
            <a class="triangle-up" href="#"><span>A</span></a>
            <div class="square2"></div>
            </div> 

            <div class="link select-B">
            <div class="square1"></div>
            <a class="triangle-up" href="#"><span>B</span></a>
            <div class="square2"></div>
            </div> 

            <div class="link select-C">
            <div class="square1"></div>
            <a class="triangle-up" href="#"><span>C</span></a>
            <div class="square2"></div>
            </div> 

            <div class="link select-D">
            <div class="square1"></div>
            <a class="triangle-up" href="#"><span>D</span></a>
            <div class="square2"></div>
            </div> 

</nav>

CSS：

nav {margin-left:100px}

.link {width:180px; height:100px; overflow:hidden;margin:auto; position:relative; margin-top: 19px; float: left; margin-left: -115px;}
.triangle-up {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 100px solid red;
    position:absolute;
    top:0px;
    left:10px;
}
.square1 {
    z-index: 10;
    position: absolute;
    display: inline-block;
    width: 80px;
    height: 170px;
   // background: blue;
    top: -44px;
    left: -34px;
    transform: rotate(39deg);
  -ms-transform: rotate(39deg);/* IE 9 */
  -webkit-transform: rotate(39deg); /* Safari and Chrome */
  -o-transform: rotate(39deg); /* Opera */
  -moz-transform: rotate(39deg); /* Firefox */
}
.square2 {
   z-index: 10;
  position: absolute;
  display: inline-block;
  width: 80px;
  height: 170px;
 // background: blue;
  top: -63px;
  left: 118px;
  transform: rotate(-39deg);
  -ms-transform: rotate(-39deg);/* IE 9 */
  -webkit-transform: rotate(-39deg); /* Safari and Chrome */
  -o-transform: rotate(-39deg); /* Opera */
  -moz-transform: rotate(-39deg); /* Firefox */
}
.link span {
   -webkit-transform: rotate(-50deg);
      -moz-transform: rotate(-50deg);
       -ms-transform: rotate(-50deg);
        -o-transform: rotate(-50deg);
           transform: rotate(-50deg);
   margin-left: -93px;
   padding-top: 54px;
   display: block;
    }

任何帮助都将不胜感激。