html - 如何在不使用图像映射的情况下制作三角形链接？

Question

我想做的是在我的html中保留一个锚点，它应该是三角形，应该只能在那个三角形部分点击，但我不应该使用图像映射，任何人都可以建议我一个解决方案

注意：我知道 CSS 形状，但它们可以完整地点击。我只是希望它可以点击成三角形。

Answer 1

是的，可以看演示

你需要这个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 */
}