三角连接区 [英] Triangular link area

问题描述

请考虑以下形状：

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

问题是在下图中， link doesn t保持其在红色三角形形状的边界。绿色三角形也是可点击的：

问题是：

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

解决方案

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

DEMO

  html，body {height：100％; margin：0; padding：0;} div {height：90％; border：10px solid lightgrey;位置：相对; overflow：hidden;} a {position：absolute; bottom：0; width：100％;身高：20％背景：红色; -webkit-transform-origin：100％0; transform-origin：100％0; -webkit-transform：rotate（-45deg）; transform：rotate（-45deg）;}  

 < div> ; < a href =＃>< / a>< / div>  

此解决方案改编自此答案：

编辑：

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

DEMO

  #area {height： 50％; border：10px solid lightgrey;位置：相对; overflow：hidden;}。gold {display：block;高度：100％;背景：金;}。红{position：absolute; bottom：0; width：100％;身高：20％背景：红色; -webkit-transform-origin：100％0; transform-origin：100％0; -webkit-transform：rotate（-45deg）; transform：（-45deg）;} / *只是为了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 =goldhref =＃goldLink>点击金色和红色区域可查看不同之处。< br />保持三角形边界。 < / a> < a class =redhref =＃redLink>< / a>< / div><！ -  FOLLOWING JUST FOR DEMO！>< h1 id =goldLink>金区域已点击< / h1>< h1 id =redLink>红色区域已点击< / h1>  
 

Consider the following shapes:

1. The grey area is an outside container. Disregard that.
2. The white area is a link (a tag).
3. The red triangular area is another link (a tag).

I have created a CSS triangle for the red area using the following code:

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

The problem is that in the following image, the link doesn't maintain it's boundaries in the red triangle shape. The in green triangle is also clickable :

Question is:
How do I make the red area link to one location, and the white to another, without having the browser count the green area in the second illustration as part of the red area?

解决方案

The border technique won't allow you to maintain the boundaries of the hover and click event inside the triangular shape. You can use transform rotate on the link combined with oveflow:hidden; on the parent element to allow click and hover event only inside the triangle :

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>

This solution is adapted from this answer : CSS triangles with transform rotate.

---

EDIT :

This demo shows you can differenciate the click envent between gold and red areas :

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>

这篇关于三角连接区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！