gsiradze gsiradze - 1 month ago 6
CSS Question

navigate on triangle click

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

Answer

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