六角溢出的背景

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文章中的一个示例，它使用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/