Question

我有三角形的形状，点击我希望客户在另一页面导航。

但链接全方位。我该如何解决？

我的div是：

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

这是一个重复的问题： Triangular link area

将链接插入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);
}

导航三角形点击

1 个答案: