如何在链接悬停上为自定义形状重叠背景

Question

图像示例：

我有2个链接： 1 和 2
两个背景渐变图像：蓝绿色和黄红色。

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

e.g。当悬停在 1 时，我希望开始蓝绿色渐变三角形，对于 2 ，但是梯度的正确位置相同。

Answer 1

通过使用边框宽度进行各种模糊的操作来制作纯粹的CSS形状。我试着将triangle rules与border gradient rules结合起来，并且无法让他们合作（在Chrome中，无论如何）。边框图像的工作原理是将图像切成9位（4个角，4个边和中心）;它似乎总是覆盖透明＆amp;坚硬形状边界规则所依赖的倾斜边缘。

所有这一切都说我没有为您提供解决方案，但就纯粹的css解决方案而言，即使使用CSS3，您也可能会失败。你可能需要一些JS或图像技巧来获得你正在寻找的效果。