Css 三角连接区

考虑以下形状：

灰色区域是一个外部容器。别理它

白色区域是一个链接（

a

tag）

红色三角形区域是另一个链接（

a

tag）

我使用以下代码为红色区域创建了一个CSS三角形：

.ribbon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    border-left: 60px solid transparent;
    border-bottom: 60px solid red;
}

问题是在下图中，链接没有将其边界保持在红色三角形形状中。绿色三角形也可单击：

问题是：
如何使红色区域链接到一个位置，白色区域链接到另一个位置，而不让浏览器将第二幅图中的绿色区域作为红色区域的一部分进行计数？

尝试以下方法：

.triangle { 
 width: 0;
 height: 0;
 border-bottom: 100px solid red;
 border-left: 100px solid transparent;
 }

---

尝试这样做，而不是制作一个带有边框的CSS三角形，制作一个正方形

a

，并将其旋转到45°：

.ribbon {
position: absolute;
right: 0;
bottom: 0;
width: 60px;
height: 60px;
transform: rotate(45deg);
}

---

确保父级

溢出：隐藏或所有红色方块都将可见：）
边框技术不允许您在三角形形状内保持悬停和单击事件的边界。您可以在链接上结合使用transform rotate和
oveflow:hidden，以仅允许在三角形内单击并悬停事件：



html，正文{
身高：100%；
保证金：0；
填充：0；
}
div{
身高：90%；
边框：10px实心浅灰色；
位置：相对位置；
溢出：隐藏；
}
a{
位置：绝对位置；
底部：0；
宽度：100%；高度：20%；
背景：红色；
-webkit转换来源：100%0；
变换原点：100%0；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}

这里有一个使用
变换的解决方案：skew
：

HTML:

检查这个，我想你必须在红色上方的绿色区域加入另一个元素。它将接受点击，不允许在下面点击。有点像将元素设置为
visiblity:none我还没试过这个，但我想它会成功。你考虑过使用图像地图吗？你把你的红色链接变成一个正方形，然后把它旋转到45度。为什么不使用老式的
地图呢。“相反”的三角形（图中的绿色）仍然链接到错误的页面。+1用于使用代码段。当然还有一个有效的解决方案。这个解决方案允许整个事情是固定的，这是一个胜利。
<div>
    <a href = ""></a>
</div>

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

div > a {
    display: block;
    height: 100%;
    background-color: red;
    transform-origin: bottom left;
    transform: skewX(-45deg);
}