带有图像的html / css六角形

Question

有机会将图像放置在六边形内吗？我已经习惯了html中的六边形形状的单元格，但是我无法用（背景图像）填充它。

这是我尝试过的：

.top {

  height: 0;

  width: 0;

  display: block;

  border: 20px solid red;

  border-top-color: transparent;

  border-right-color: transparent;

  border-bottom-color: red;

  border-left-color: transparent;

}

.middle {

  height: 20px;

  background: red;

  width: 40px;

  display: block;

}

.bottom {

  height: 0;

  width: 0;

  display: block;

  border: 20px solid red;

  border-top-color: red;

  border-right-color: transparent;

  border-bottom-color: transparent;

  border-left-color: transparent;

}


<div class="hexagon pic">

  <span class="top" style="background: url(http://placekitten.com/400/400/)"></span>

  <span class="middle" style="background: url(http://placekitten.com/400/400/)"></span>

  <span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span>

</div>





<div class="hexagon">

  <span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>

  <span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>

  <span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>

</div>



<div class="hexagon">

  <span class="top"><img src="http://placekitten.com/400/400/" /></span>

  <span class="middle"><img src="http://placekitten.com/400/400/" /></span>

  <span class="bottom"><img src="http://placekitten.com/400/400/" /></span>

</div>

Answer 1

使用CSS3，几乎一切皆有可能：

在那里，我使用进行了不同的旋转overflow: hidden，因此您可以获得跨浏览器（很好，_现代的_跨浏览器）蒙版，该蒙版甚至可以在蒙版区域上覆盖和单击。