想要使用IE8兼容性的HTML CSS jQuery将矩形图像转换为六边形图像

Question

<div class="backgroundImage">
</div>
.backgroundImage
{
  width:100px;
  height:100px;
  float:left
  background:url('source.jpeg');
}

我想在加载到网页之前将其矩形形状的源。可能。我不确定。它应该在包括IE8在内的所有浏览器中兼容。

预先感谢。

Answer 1

不是很优雅，但它似乎有效 - 小提琴您可以增加角落的大小，以制造六角形而不是八角形。将图片放在DIV中作为背景。

添加与Div的背景相同颜色的角落

它似乎在IE8（使用的F12设置）下工作，但我不能保证。

我敢肯定其他人会想出一些更优雅的东西。

html

<div class='bigdiv'>
    <div class='topleft'></div>
    <div class='topright'></div>
    <div class='bottomleft'></div>
    <div class='bottomright'></div>
</div>

Answer 2

请查看本教程。它描述了如何使用CSS Transform和calc（）创建一个完美的六边形（它允许您以任何大小创建它，并且您需要调整的只是高度）。

它使用背景色，但我想您可以使用图像。