Html 使用css创建六边形的问题

我正在尝试使用图像创建

hexagon

，而不使用css设置背景图像

我尝试了下面的代码，显示完美，但它的问题在电子邮件中。背景图像未在电子邮件中设置，因此需要

从背景中删除

，并需要以任何其他方式进行设置。我尝试了很多不同的方法，但没有成功。因为我不是设计师，所以

我使用了下面的代码，完成了，但不需要设置任何其他方式

<div class="hexagon pic">
    <span class="top"></span>
    <span class="bottom"></span>
</div>

.hexagon {
    background: url(http://placekitten.com/400/400/);
    width: 400px;
    height: 346px;
    position: relative;
}

.hexagon span {
    position: absolute;
    display: block;
    border-left: 100px solid red;
    border-right: 100px solid red;
    width: 200px;
}

.top {
    top: 0;
    border-bottom: 173px solid transparent;
}

.bottom {
    bottom: 0;
    border-top: 173px solid transparent;
}

.六边形{
背景：url(http://placekitten.com/400/400/);
宽度：400px；
高度：346px；
位置：相对位置；
}
.六角跨度{
位置：绝对位置；
显示：块；
左边框：100px实心红色；
右边框：100px实心红色；
宽度：200px；
}
.顶{
排名：0；
边框底部：173px实心透明；
}
.底部{
底部：0；
边框顶部：173px实心透明；
}

谁都有主意

谢谢

---

这就行了

在我看来，您似乎想要

剪辑路径

。看见另外，请在使用前检查浏览器支持。感谢您的回复，但我想在不使用背景图像的情况下将图像设置为hexagon。有什么想法吗？是的，你可以用img代替div。没有任何效果。。你能在jffidle做吗…在我能看到的地方。ThanksBackground图像未发送电子邮件，因此我想删除它。请阅读我的问题…我已经实现了它，但删除了背景图像，并希望以其他方式实现…Thanksohh lol，我忘记了初始条件。我会努力的

<div id="hexagon">
    <img src="image.jpg">
</div>  

#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;}


#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;}

#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;}

#hexagon > img { height: inherit; width: inherit; }