点击三角形导航

Question

我有一个三角形的形状，点击它我想让客户端在另一个页面导航。

但是链接在整个正方形中。怎么解呢?

mydiv 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 1

这是一个重复的问题:三角形链接区

将链接插入div

使用歪斜或旋转: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);
}