三角链接区域

Question

考虑以下形状：

1. 灰色区域是外部容器。无视那个。
2. 白色区域是一个链接（a标记）。
3. 红色三角形区域是另一个链接（a标记）。

我使用以下代码为红色区域创建了一个CSS三角形：

.ribbon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    border-left: 60px solid transparent;
    border-bottom: 60px solid red;
}

问题在于，在下图中，链接不会将其边界保持为红色三角形。绿色三角形也是可点击的：



问题是：
如何将红色区域链接到一个位置，将白色链接到另一个位置，而不让浏览器计算第二个插图中的绿色区域作为红色区域的一部分？

Answer 1

边框技术不允许您在三角形内部保持悬停和单击事件的边界。您可以在链接上使用变换旋转与父元素上的oveflow:hidden;结合使用，以仅允许在三角形内单击和悬停事件：

<强> DEMO

html,body{
    height:100%;
    margin:0;
    padding:0;
}
div{
    height:90%;
    border:10px solid lightgrey;
    position:relative;
    overflow:hidden;
}
a{
    position:absolute;
    bottom:0;
    width:100%; height:20%;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div>
    <a href="#"></a>
</div>

此解决方案改编自此答案：CSS triangles with transform rotate。

---

编辑：

此演示显示您可以区分金色和红色区域之间的点击次数：

<强> DEMO

#area {
    height:50%;
    border:10px solid lightgrey;
    position:relative;
    overflow:hidden;
}
.gold{
    display:block;
    height:100%;
    background:gold;
}
.red {
    position:absolute;
    bottom:0;
    width:100%; height:20%;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* FOLLOWING JUST FOR THE DEMO */
 html, body {height:100%;margin:0;padding:0;overflow:hidden;}
a{color:teal;text-decoration:none;font-family:arial;font-size:20px;padding:5%;text-align:center;}
#goldLink, #redLink {position:absolute;top:50%;left:100%;width:100%;text-align:center;}
#goldLink:target {background:gold;left:0;}
#redLink:target {background:red;left:0;}

<div id="area"> 
    <a class="gold" href="#goldLink">
        Click gold and red areas to see the diference.<br/>
        Triangular boundaries are maintained.
    </a>
 <a class="red" href="#redLink"></a>
</div>
<!-- FOLLOWING JUST FOR DEMO !-->
<h1 id="goldLink">Gold area clicked</h1>
<h1 id="redLink">Red area clicked</h1>

  

Answer 2

以下是使用transform: skew的解决方案：http://jsfiddle.net/0a8aq5ve/。

HTML：

<div>
    <a href = ""></a>
</div>

CSS：

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

div > a {
    display: block;
    height: 100%;
    background-color: red;
    transform-origin: bottom left;
    transform: skewX(-45deg);
}

Answer 3

试试这个：

.triangle { 
 width: 0;
 height: 0;
 border-bottom: 100px solid red;
 border-left: 100px solid transparent;
 }

Answer 4

尝试一下，不要制作带边框的CSS三角形，而是制作一个正方形a并将其旋转到45°：

.ribbon {
position: absolute;
right: 0;
bottom: 0;
width: 60px;
height: 60px;
transform: rotate(45deg);
}

并确保让父overflow: hidden;或所有红色方块可见：）