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

Question

图像示例：

​

​

我有两个链接：1和2

两幅背景梯度图像：蓝绿色和黄红.

在其中一个(1或2)上盘旋后，我想要有一个有适当扩展背景的三角形。

例如，在1上盘旋时，我想要开始蓝绿色的梯度三角形，2也是这样，但梯度的位置是合适的。

Answer 1

通过使用边框宽度做各种晦涩的事情，使纯css形状工作。我试着把三角规则和边界梯度规则结合在一起，但没能让他们合作(无论如何，在Chrome中)。边框图像的工作原理是将图像分割成9位(4角、4边和中心)；它似乎总是覆盖硬形状边界规则所依赖的透明和角度边缘。

这就是说，我没有为您提供解决方案，但就纯css解决方案而言，您可能运气不佳，甚至使用CSS3。你可能需要一些JS或图像技巧来获得你想要的效果。