想要使用兼容 IE8 的 HTML CSS JQuery 将矩形图像转换为六边形图像？答案

【问题标题】：Want to convert a rectangular image to hexagon image using HTML CSS JQuery with IE8 compatability?想要使用兼容 IE8 的 HTML CSS JQuery 将矩形图像转换为六边形图像？
【发布时间】：2014-01-27 05:04:30
【问题描述】：

<div class="backgroundImage">

</div>

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

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

提前致谢。

【问题讨论】：

标签： jquery html css internet-explorer-8

【解决方案1】：

不是很优雅，但它似乎可以工作 - FIDDLE 您可以增加角的大小以制作六边形而不是八边形。将图片放在一个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>

【讨论】：

角落有渐变效果，在IE8中很难实现。

【解决方案2】：

看看this tutorial。它描述了如何使用 CSS transform 和 calc() 创建一个完美的六边形（它允许您创建任意大小的六边形，您需要调整的只是高度）。

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

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。