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

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并匹配该方向的角度。除此之外，您还需要确保它们位于包装器中，以便您可以隐藏溢出，以便只有可见部分可以点击。

This thread可能有用。

Answer 2

使用地图和区域标记。

http://www.w3schools.com/tags/tag_area.asp

使用poly并形成一个矩形

Answer 3

这对我有用：

＆＃13;

＆＃13;

.social-button {
    width: 80px;
    height: 80px;
    display: block;
    margin: 20px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.social-button a {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

.twitter {
    border-top: 0px solid transparent;
    border-bottom: 80px solid transparent;
    border-right: 80px solid #4679BD;
}
.facebook {
    border-top: 80px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 80px solid #BD79BD;
}

＆＃13;

<div class="social-button">
    <a href="#" class="twitter"></a>
    <a href="#" class="facebook"></a>
</div>

＆＃13;

＆＃13;

＆＃13;