фон в переполнении шестиугольника

Question

Как я могу убедиться, что мой шестиугольник позволяет переполнять фоновое изображение?

Я создал шестиугольники со следующим кодом:

--- 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> 

это дает мне следующий результат :

, где я не хочу:

как я могу это достичь? У меня нет подсказки, и я полностью потерян, Google не показывает ничего полезного в моих глазах.

Answer 1

Я использовал пример из csstricks статьи, которая достигает того, что вы пытаетесь сделать с помощью клип-путь

-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 

http://codepen.io/Vall3y/pen/GgRVva

Вот полная статья http://css-tricks.com/sketchy-avatars-css-clip-path/