Html 使用CSS、画布或SVG的三角形

这是我们目前所做的

文本1


文本2


文本3


文本4

1） 共有4个分区，每个分区的宽度为父分区的25%

2） 这些div对高度和宽度都有响应

3） 当用户将鼠标悬停在其中一个div上时，其宽度将更改为34%，其他div的宽度将更改为22%

4） 每个div内的图像使用

背景尺寸：cover

问题是“杂乱的边缘”

是否可以仅使用CSS进行修复

感谢您的帮助

---

将此代码传输到SVG或画布是非常值得赞赏的。

这是Webkit引擎的一个已知问题

技巧是使用

背面可见性

：

.part_shape {
    -webkit-backface-visibility: hidden;
}

旁注：

---

我使用这个技巧时不知道它为什么起作用。我猜它会强制启用3d引擎或其他东西，从而使边缘平滑。我想说同样的话：（在FF中，它似乎可以）+1用于小提琴。对于大靴子，另一个+1:D，但只允许1+。呵呵

.part_shape {
    -webkit-backface-visibility: hidden;
}