六边形里面

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/