三角鏈接區域

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

試試這個：

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

Answer 2

試一下，而不是使與邊框的CSS三角形，使方形a，並將其旋轉到45°：

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

而且一定要進行父母overflow: hidden;或所有紅色方塊都將可見:)

Answer 3

邊框技術不允許您維護懸停和點擊事件的邊界一邊三角形。您可以使用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。

---

編輯：

本演示展示了differenciate金色和紅色區域之間的點擊envent：

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 4

下面是使用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); 
}