html - 仅使链接的可见部分可点击

Question

我正在尝试做这样的事情:

按钮的两边都可以点击并链接到不同的网站(猜猜是哪个网站，呵呵)。

https://jsfiddle.net/3HG6d/1836/

我遇到的问题(可以在 jsfiddle 中看到)是顶部 <a>标签总是与第二个标签重叠，因此只有一个可点击。

CSS:

a {
    float:left;
    margin:0.5%;
    position:absolute;
    display:inline-block;
}

/*Up-right pointing*/
.triangle-up-right {
    width: 0;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle-up-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;

    border-left: 500px solid transparent;
    border-top: 500px solid #4679BD;
}

/*Down-left pointing*/
.triangle-down-left {
    width: 10%;
    height: 0;
    padding-bottom: 10%;
    overflow: hidden;
}
.triangle-down-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #4679BD;
}

编辑:现在应该显示正确的 jsfiddle

Answer 1

您需要为每个元素使用一个旋转的正方形 div，并以这种方式匹配 Angular 。最重要的是，您需要确保它们位于包装器内，以便您可以 overflow hidden 部分，以便只有可见部分是可点击的。

This thread可能会有用。