1

我有一个用 CSS :before 和 :after 伪元素制作的六边形。我试图在这个网站上重现效果：http ://www.upperfirst.com （我知道他们使用画布）

问题是，如果我使用多个元素，悬停时的尺寸增加不会正确设置动画。我通过使用带有边框的 :before 和 :after 来修复动画。现在我想让图像工作，但我似乎无法弄清楚如何排列边框图像和中间部分的图像，使其看起来无缝。

这是我到目前为止所拥有的小提琴：http: //jsfiddle.net/uwZ8w/

谢谢！

4

1 回答 1

1

这个答案基于您修改后的代码，该代码有点使用我的六边形技术。关于避免您提到的图形对齐问题，我有两个建议。

  1. 将您的图像缩放到您想要的大小，这样您就可以避免background-size像当前所做的任何缩放。
  2. 同样，避免在宽度和高度上缩放.innerdiv 200%（您不必这样做，它们应该与.hexagondiv 和您归类为.beforeand的直接子级的大小相同.after）。然而，关于那...

...我很好奇你为什么使用.innerdiv 而不是:before伪元素（以避免混乱你的代码）。在我看来，您可能不了解伪元素是什么（因为您content: '';的.innercss 中有 a，如果它不是伪元素而是真实元素，则无关紧要）。要么，要么当您从伪元素切换到真实元素时div（无论出于何种原因进行了切换），您不小心将代码留在了那里。

于 2012-05-28T20:22:28.810 回答