想要使用HTML CSS JQuery与IE8兼容性将矩形图像转换为六角形图像？

<div class="backgroundImage"> 

</div> 

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

我想在加载到网页之前将矩形形状的source.jpeg转换为六角形。是否有任何使用HTML CSS和jquery转换为六角形的方法。我听说使用SVG图形这可能是可能的，我不确定。它应该兼容包括IE8在内的所有浏览器。想要使用HTML CSS JQuery与IE8兼容性将矩形图像转换为六角形图像？

在此先感谢。

来源

2014-01-21 user3218194

不是很优雅，但它似乎工作 - 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>

来源

2014-01-21 08:49:57 TimSPQR

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

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

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

来源

2014-01-26 21:04:30 KennyV

虽然这可能在理论上回答这个问题，[这将是更可取的]（http://meta.stackexchange.com/q/8259）在这里包括答案的基本部分，并提供参考链接。 –

想要使用HTML CSS JQuery与IE8兼容性将矩形图像转换为六角形图像？

回答

相关问题