javascript - 如何在链接悬停时为自定义形状制作重叠背景

Question

图像示例：

我有 2 个链接：1和2
两个背景渐变图像：blue-green和yellow-red。

将鼠标悬停在其中一个（1 或 2）上后，我想要具有适当扩展背景的三角形。

例如，当悬停在1上时，我想要蓝绿色渐变三角形的开始，与2相同，但渐变的位置正确。

Answer 1

通过对边框宽度进行各种模糊处理来制作纯 css 形状。我尝试了一些尝试将三角形规则与边框渐变规则结合起来，但无法让它们合作（无论如何在 Chrome 中）。边框图像的工作原理是将图像切成 9 位（4 个角、4 个边缘和中心）；它似乎总是覆盖硬形状边框规则所依赖的透明和有角度的边缘。

这就是说我没有适合你的解决方案，但就纯 css 解决方案而言，即使使用 CSS3，你也可能不走运。您可能需要一些 JS 或图像技巧来获得您正在寻找的效果。