Html 如何在不使用图像贴图的情况下制作三角形链接？

我想做的是在我的html中保留一个锚，它应该是三角形的，应该只能点击三角形部分，但我不应该使用图像地图。有人能给我建议一个解决方案吗

---

注意：我知道CSS形状，但它们可以在整个块中单击。我只希望它能以一个小摆线的形状点击。

是的可以看到

您需要以下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> 

---

你为什么不想使用地图呢？试试这个@Champ：我以前见过，但这种技术只是有一些彩色和透明的边框，但如果我们在上面应用锚，整个元素都可以点击。我只想要三角形的部分clickable@PhonicUK当前位置我的导师明确告诉我不要使用它。我也不知道确切的原因抱歉我以为你需要css形状。我已经发布了答案，看看它。谢谢。这很有用，但它是否兼容跨浏览器？更新我的答案，让它在IE 9、Safari、Chrome、Opera和Firefox中工作：）谢谢你做了很多：）但是我们可以让它支持IE7吗？你可以尝试在IE7中搜索一些补丁以进行轮换。嗨，我知道这是一篇老文章，但是。你能解释一下为什么需要这两个正方形吗？我需要创建一个星形链接，因此我正在尝试思考如何调整此解决方案。谢谢

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