想要使用具有IE8兼容性的HTML CSS JQuery将矩形图像转换为六边形图像吗？ .背景图片 { 宽度：100px； 高度：100px； 浮动：左 背景：url（'source.jpeg'）； }

在加载到网页之前，我想将source.jpeg（矩形）转换为六边形。是否有任何方法可以使用HTML CSS和jquery将其转换为六边形。我听说使用SVG图形可能是可行的。我不确定。 它应该兼容所有浏览器，包括IE8

---

提前谢谢。

不太雅致，但似乎很管用- 您可以增加角的大小，使其成为六边形而不是八角形。 将图片放在div中作为背景

在div外添加与背景颜色相同的角

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

我相信其他人会想出更优雅的东西

HTML

看一看。它描述了如何使用CSS transform和calc（）创建一个完美的六边形（可以创建任意大小的六边形，只需调整高度）

---

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

角落具有渐变效果，这在IE8中很难实现。虽然这在理论上可以回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。

<div class="backgroundImage">

</div>

.backgroundImage
{
  width:100px;
  height:100px;
  float:left
  background:url('source.jpeg');
}

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