css - 三 Angular 链接区

Question

考虑以下形状:

1. 灰色区域是外部容器。忽略这一点。
2. 白色区域是链接(a标签)。
3. 红色三 Angular 形区域是另一个链接(a 标签)。

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

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

问题是在下图中，链接没有保持其红色三 Angular 形的边界。绿色三 Angular 形也是可点击的:

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

Answer 1

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

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>