如何使三角形链接而不使用图像映射？

问题描述

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

注意：我知道CSS形状，但他们可以在完全块中点击。

解决方案

是，可以看到

您需要此html：

 < div id =link> // Wrapper 
< div id =square1>< / div> // rotate square to cover the extra are 
< a id =triangle-uphref =＃>< / a> // actual link 
< div id =square2>< / div> // rotate 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和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和Chrome * / 
 -o-transform：rotate（-26deg）; / * Opera * / 
 -moz-transform：rotate（-26deg）; / * Firefox * / 
} 
  

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.

解决方案

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

这篇关于如何使三角形链接而不使用图像映射？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！