图片示例:
我有 2 个链接:1 和 2
两个背景渐变图像:蓝绿色和黄红色。
将鼠标悬停在其中一个(1 或 2)上后，我想要具有适当扩展背景的三 Angular 形。
例如当悬停在 1 上时，我希望开始有 blue-green 渐变三 Angular 形，与 2 相同，但渐变位置正确。
最佳答案
通过使用边框宽度做各种模糊的事情来使纯 css 形状工作。我试着把 triangle rules 结合起来与 border gradient rules并且无法让他们合作(无论如何在 Chrome 中)。边界图像的工作原理是将图像切成 9 位(4 个 Angular 、4 个边缘和中心)；它似乎总是覆盖硬形状边界规则所依赖的透明和 Angular 边缘。
这就是说我没有适合您的解决方案，但就纯 css 解决方案而言，您可能不走运，即使使用 CSS3。您可能需要一些 JS 或图像技巧来获得您正在寻找的效果。
关于javascript - 如何在链接悬停时为自定义形状制作重叠背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15646337/