Triangular link area

Question

Consider the following shapes:

CSS triangle area

The grey area is an outside container. Disregard that.
The white area is a link (a tag).
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 :

maintain the click boundaries in the triangle

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?

Check this [site](http://css-tricks.com/examples/ShapesOfCSS/) — Lal, Sep 18 '14 at 16:14
I think you'd have to put in another element in the green area on top of the red. It will take the clicks and not allow clicks underneath. Sort of like when you have an element set to `visiblity: none;` I haven't tried this but I think it will wokr. — Leeish, Sep 18 '14 at 16:16
Have you considered using an image map? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map — AeroX, Sep 18 '14 at 16:17
why not use an old fashioned `map` http://www.w3schools.com/tags/att_area_coords.asp — KnightHawk, Sep 18 '14 at 16:35

score 15 · Answer 1 · edited May 23 '17 at 12:25

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>

+1 for using the code snippet. And for having a working solution of course. — Roddy of the Frozen Peas, Sep 18 '14 at 16:38

score 6 · Answer 2 · answered Sep 18 '14 at 16:26

6

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

answered Sep 18 '14 at 16:26

DRD

5,557
14
14

This solution allows the whole thing to be `position: fixed` which is a win. – Alesh Houdek Apr 17 '17 at 12:57

score 0 · Answer 3 · answered Sep 18 '14 at 16:16

0

Try this :

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

answered Sep 18 '14 at 16:16

Florin Pop

5,105
3
25
58

Doesn't work. The "opposite" triangle (green in the illustration) still links to the wrong page. – phidah Sep 18 '14 at 16:22

score 0 · Answer 4 · answered Sep 18 '14 at 16:21

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 :)

Triangular link area

4 Answers4

Linked

Related