考虑以下形状:
- 灰色区域是外部容器。忽略这一点。
- 白色区域是链接(
a
标签)。 - 红色三 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 形也是可点击的:
问题是:
如何让红色区域链接到一个位置,白色区域链接到另一个位置,而不让浏览器将第二个插图中的绿色区域计为红色区域的一部分?
最佳答案
边框技术不允许您在三 Angular 形内保持悬停和单击事件的边界。您可以在链接上使用变换旋转并结合父元素上的 oveflow:hidden;
以允许仅在三 Angular 形内单击和悬停事件:
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 .
编辑:
此演示显示您可以区分金色和红色区域之间的点击事件:
#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>
关于css - 三 Angular 链接区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25917610/