i trying build navigation menu overlapping triangles.
i limited anchor area triangle this. works charm, ok.
then when overlap these triangles, can't click properly..
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 , 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 , 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; } any appreciated.
