navigate on triangle click

Question

I have shape of triangle on which click I want client to navigate in another page.

But link goes in whole square. How can I solve that?

my div is:

div{
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    width: 0;
    height: 0;
    top: 0;
    position: absolute;
    cursor: pointer;
    line-height: 75px;
}

JSFIDDLE

score 0 · Accepted Answer · edited May 23 '17 at 12:16

0

This is a repeating question: Triangular link area

Insert the link into the div

Use skew or rotate: http://jsfiddle.net/0a8aq5ve/

html,body {
    height:100%;
    margin:0;
    padding:0;
}
div {
    height:50%;
    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);
}

edited May 23 '17 at 12:16

Community

1
1

answered Oct 27 '16 at 10:57

felix91

452
3
11

if you know the question to be a dupe please don't reanswer the question - It would be best to VTC as dupe as OP will be able to find their answer in a single link. – jbutler483 Oct 27 '16 at 11:14

navigate on triangle click

1 Answers1