三角链接区域

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三角形.

编辑:

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

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;
 }