需要我的图像像HTML / CSS一样分配

Question

*我有一个六边形图像，我需要安排像蜂窝，顶部3底部2图像与响应。如何使用CSS实现这一点*

<div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="style/images/service/tele1.png" alt="" />
             
            </figure>
       </div> 
 
 <div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="style/images/service/broad.png" alt="" />
             
            </figure>
          
		</div>  
		 
		 <div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="style/images/service/broad.png" alt="" />
             
            </figure>
         
 </div>  
 
 <div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="style/images/service/broad.png" alt="" />
             
            </figure>
          
 </div> 
 
  <div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="style/images/service/broad.png" alt="" />
             
            </figure>
        </div>  
 

Answer 1

它可能对你有所帮助！

https://codepen.io/kalaiselvan/pen/BJdeoR

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="col-md-12">
<div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="http://www.pngall.com/wp-content/uploads/2016/04/Hexagon-PNG-Clipart.png" alt="" />
             </figure>
</div> 
 
<div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="http://www.pngall.com/wp-content/uploads/2016/04/Hexagon-PNG-Clipart.png" alt="" />
            </figure>
</div>  
		 
<div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="http://www.pngall.com/wp-content/uploads/2016/04/Hexagon-PNG-Clipart.png" alt="" />
 			</figure>
</div>  
 </div>
 <div class="col-md-12">
   
<div class="col-md-offset-2 col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="http://www.pngall.com/wp-content/uploads/2016/04/Hexagon-PNG-Clipart.png" alt="" />
            </figure>
</div> 
 
<div class="col-md-4">
            <figure class="overlay overlay4 light"><a href="#"></a> <img src="http://www.pngall.com/wp-content/uploads/2016/04/Hexagon-PNG-Clipart.png" alt="" />
            </figure>
</div> 
   <div class="col-md-offset-2"></div>
</div>

Answer 2

利用clip-path css属性创建蜂窝形状的图像。您可以浏览此处说明的代码：

可以使用CSS中的clip-path属性创建掩蔽效果。在每个使用的图像上应用此样式。它裁剪图像并在六边形容器中显示为 - 图像。

figure img{
width:200px;height:200px; float:left;display:inline-block;
-webkit-clip-path: polygon(50% 0%, 100% 27%, 100% 76%, 50% 100%, 0 76%, 0 27%);
clip-path: polygon(50% 0%, 100% 27%, 100% 76%, 50% 100%, 0 76%, 0 27%);
}

你可以在这里找到执行的代码：https://codepen.io/UI-UXDeveloper/pen/zpdVvr