里面有图像的六边形

Question

我正在尝试在下面创建此图像的CSS / HTML版本，尝试使每个六边形形状成为可点击元素，打开弹出窗口来描述所点击项目的内容

我使用Hexagon Generator来创建我的元素，但根据这张图片，我无法按照应该/或类似的方式对它们进行排序。 （中间的主图像和周围的六边形）

让整个事情响应（移动就绪），这是另一个问题。

Answer 1

这绝不是一个优化的解决方案，我可以创造更好的东西，但我想让你看一下这方面的一种方法。

<强> HTML

<div class="hex">
  <div class="hex-title">
    Simple title
  </div>
  <div class="hex-hide"></div>
  <div class="hex-img">
     <img src="https://cdn.stocksnap.io/img-thumbs/960w/Q7STENMU1K.jpg">
  </div>
</div>

<强> CSS

.hex{
  width:300px;
  height:300px;
  margin:50px auto;
  position:relative;
}
.hex:before{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-top:0px solid #fff;
  border-left:145px solid #fff;
  top:0;
  left:0;
  z-index:9999;
}
.hex:after{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-top:0px solid #fff;
  border-right:145px solid #fff;
  top:0;
  right:0;
  z-index:9999;
}
.hex-title{
  width:105%;
  height:40px;
  background:#005A87;
  position:absolute;
  margin:auto;
  left:-2.5%;top:0;bottom:0;
  z-index:99999999999;
  font-family:Arial;
  font-size:14px;
  color:#fff;
  line-height:40px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
}
.hex-img{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.hex-img img{
  max-height:100%;
}
.hex-hide{
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
}
.hex-hide:before{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-bottom:0px solid #fff;
  border-left:145px solid #fff;
  bottom:0;
  left:0;
  z-index:9999;
}
.hex-hide:after{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-bottom:0px solid #fff;
  border-right:145px solid #fff;
  bottom:0;
  right:0;
  z-index:9999;
}

演示：https://jsfiddle.net/j74padnq/

这是一个类似于发布图片的演示，虽然细节较少：https://jsfiddle.net/j74padnq/1/