Triangular link area

Question

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?

Answer 1

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>

Answer 2

Here's a solution using 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);
}