html - 六边形溢出的背景

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>

这给了我以下结果:

我想要的偏离路线:

我怎样才能做到这一点？我一无所知，完全迷失了方向，谷歌在我眼中没有显示任何有用的信息。

Answer 1

我使用了 csstricks 文章中的示例，它实现了您使用 clip-path 尝试做的事情

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