需要像蜂窝一样使用 HTML/CSS 分配我的图像答案

【问题标题】：Need my image to be assign like honeycomb with HTML/CSS需要像蜂窝一样使用 HTML/CSS 分配我的图像
【发布时间】：2018-01-04 20:10:20
【问题描述】：

*我有一个六边形图像，我需要像蜂窝一样排列，顶部 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>

【问题讨论】：

可能对你有帮助codepen.io/web-tiki/pen/wWGeEM?editors=1010
我已经有单独的六边形图像，我需要安排前 3 和底部 2 图像。我需要帮助
然后查看@KalaiselvanA 提供的链接！
@VidhyaVidu 试试这样codepen.io/kalaiselvan/pen/BJdeoR
谢谢kalaiselvan。明白了

标签： javascript jquery html css

【解决方案1】：

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

可以使用 CSS 中的 clip-path 属性创建遮罩效果。将此样式应用于使用的每个图像。它裁剪图像并显示为 - Hexagonal 容器中的图像。

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

【讨论】：

没关系。我需要响应式

【解决方案2】：

可能对你有帮助！

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>

【讨论】：