Is there a way to make my hexagon background image overflow properly?
I have designed hexagons using the following code:
--- CSS ---
#color5 {
background-image: url(http://URL/images/Logo.jpg);
background-color: purple;
z-index: 1;
}
#hex3 {
width: 300px;
height: 300px;
}
.hexagon-wrapper {
text-align: center;
margin: 20px;
position: relative;
display: inline-block;
}
.hexagon {
height: 100%;
width: calc(100% * 0.57735);
display: inline-block;
}
.hexagon:before {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
z-index: -1;
content: '';
-webkit-transform: rotateZ(60deg);
}
.hexagon:after {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: '';
z-index: -1;
-webkit-transform: rotateZ(-60deg);
}
** HTML **
<div id="eventinfo">
<div id="hex3" class="hexagon-wrapper">
<div id="color5" class="hexagon"></div>
</div>
</div>
This results in the displayed design:
I aim to achieve:
How can I make this happen? I am at a loss and unable to find any useful information on Google.