内置图像的html/css六边形

是否有机会将图像放置在六边形内？ 我习惯了,但是我不能让它充满(背景)图像

以下是我尝试过的：

.top{
身高：0；
宽度：0；
显示：块；
边框：20px纯红；
边框顶色：透明；
右边框颜色：透明；
边框底色：红色；
左边框颜色：透明；
}
.中{
高度：20px；
背景：红色；
宽度：40px；
显示：块；
}
.底部{
身高：0；
宽度：0；
显示：块；
边框：20px纯红；
边框顶部颜色：红色；
右边框颜色：透明；
边框底色：透明；
左边框颜色：透明；
}

---

我不知道这是否是您正在寻找的答案，但您可以在您想要成为六边形的图像上放置一个六边形透明.png，让它像一个遮罩一样

---

只要简单地用z-index将透明的png放在图像上就可以了，我不认为有一种方法可以在没有任何外部图形的情况下使用纯HTML/CSS。可能会有一些聪明的黑客使用您在问题中链接到的技术，但它们只是聪明的黑客，因此可能不适合在实时网站中使用（与大多数“聪明的黑客”一样，也可能至少存在一些跨浏览器兼容性问题）

您可以使用Canvas或SVG来完成

画布是一种位图图形功能，也是HTML5规范的一部分。SVG是一种矢量图形语言，可以在HTML页面中使用

这两种功能都是现代浏览器的特点，因此，不幸的是，大多数版本的Internet Explorer（IE8及更早版本）都缺少这两种功能

然而，幸运的是，IE确实支持一种类似于SVG的语言VML，并且有许多JavaScript库允许IE通过将画布和SVG转换为VML来使用它们

另见：

使用上面链接的任何工具，您都可以使用画布或SVG绘制六边形（或任何其他）形状，并用图形填充它

---

希望能有所帮助。

您可以通过如下方式覆盖拐角：

HTML:

---

使用CSS3，几乎一切都是可能的：

---

在那里，我对溢出：隐藏进行了不同的旋转，所以你可以得到一个跨浏览器（现代的cross broser）遮罩，甚至可以在遮罩区域进行覆盖和点击。

如果你只需要放置一张图片，这里有一个简单的方法

<style>
.hex{
    width:80px;
    height:80px;
    background-image: url(http://placekitten.com/400/400/);
    background-size: cover;
    position:relative;
    margin:10px;
}
.hex:before, .hex:after{
    content:"";
    position:absolute;
    top:0px;height:40px;width:0px; /* 40 = height/2 */
    z-index:1;
    border:20px solid #FFF; /*change #FFF to your bg color*/
}
.hex:before{
    left:-20px; /* -1*borderWidth */
    border-right:40px solid transparent;/* width/2 */
}
.hex:after{
    left:40px; /* width/2 */
    border-left:40px solid transparent;/* width/2 */
}
</style>
<div class="hex"></div>

海克斯先生{
宽度：80px；
高度：80px；
背景图片：url(http://placekitten.com/400/400/);
背景尺寸：封面；
位置：相对位置；
利润率：10px；
}
.hex:之前，.hex:之后{
内容：“；
位置：绝对位置；
顶部：0px；高度：40px；宽度：0px；/*40=高度/2*/
z指数：1；
边框：20px纯色#FFF；/*将#FFF更改为背景色*/
}
海克斯：以前{
左：-20px；/*-1*边框宽度*/
右边框：40px实心透明；/*宽度/2*/
}
.海克斯：之后{
左：40px；/*宽度/2*/
左边框：40px实心透明；/*宽度/2*/
}

需要边界吗？背景img将更容易、更快

<div class="hex">
    <div style="position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px;
        z-index:2;background-image:url(/images/hexagon.png);">
    </div>
</div>

---

实现带有图像的六边形最灵活的方法是使用内联SVG：

svg{
宽度：30%；
}

---

一种新的简单方法是使用css3

剪辑路径

属性

发件人：

clip path CSS属性防止元素的一部分被删除 通过定义要显示的剪裁区域来显示，即， 仅显示元素的特定区域

以下css将显示六边形的矩形元素：

div.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

输出图像：

正文{
背景：线性梯度（橙色、黄色）；
最小高度：100vh；
保证金：0；
}
.六边形{
剪辑路径：多边形（50%0、100%25%、100%75%、50%100%、075%、025%）；
背景：url（“https://i.imgur.com/waDgcnc.jpg）无重复；
背景尺寸：封面；
利润率：10px自动；
高度：200px；
宽度：200px；
}

在你期望的风格上也一样。你可以检查一下这个问题的最佳解决方案：我认为我是html/css中的一个裂缝（一点都不难），但我没有得到你在那里做的任何东西。谢谢令人惊叹的。。。但是在六边形上加一个边框怎么样？嘿，我注意到镀铬的边缘不光滑，我加了一个补丁：这真是太棒了！请告诉我这个-ms变换：旋转（120度）；在-60度之间是错误还是必须是这样？我喜欢这个，因为它在某种程度上适用于较旧的浏览器，但无论如何，并不完全适用我也喜欢这个。使用较旧的浏览器。：）回答得好。但有一件事让我困惑。使用

1

和

99

坐标代替

0

和

100

有什么特别的原因吗？@MuhammadUsman这是为了防止笔划被svg元素剪裁好，非常感谢。我如何放大这个东西？现在，如果我只是将图像放大，它似乎并没有完全填满方框。@JCharette只是将svg宽度放大/缩小。

<div class="hex">
    <div style="position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px;
        z-index:2;background-image:url(/images/hexagon.png);">
    </div>
</div>

div.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}