Does anyone know how to create a hexagon shape using an image without setting it as the background image using CSS? I tried the code below and it worked perfectly, but there's an issue when viewing it in emails. The background image doesn't display in email clients, so I need to find another way to achieve this without relying on a background image. I've tried various methods without success since I'm not a designer.
I used the following code which works, but I'm looking for an alternative solution:
<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;
}
If you have any ideas or suggestions, please let me know! Thank you!