Triangular link area

问题:

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?

回答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>

回答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);
}

回答3:

Try this :

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

回答4:

Try that, instead of making a CSS triangle with borders, make a square a and rotate it to 45°:

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

And be sure to make the parent overflow: hidden; or all the red square will be visible :)