html / css六角形与图像里面

本文介绍了html / css六角形与图像里面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

有机会将图像放在六边形内吗？ 我习惯于html 中的六边形单元格，但我可以

这是我试过的：

.top {height：0; width：0;显示：block; border：20px solid red; border-top-color：transparent; border-right-color：transparent; border-bottom-color：red; border-left-color：transparent;}。middle {height：20px;背景：红色; width：40px; display：block;}。bottom {height：0; width：0;显示：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 =topstyle =background：url（placekitten/400/400/）>< / span> < span class =middlestyle =background：url（placekitten/400/400/）>< / span> < span class =bottomstyle =background：url（placekitten/400/400/）>< / span>< / div>< div class =hexagon ; < span class =topstyle =overflow：hidden;>< img src =placekitten/400/400//>< / span> < span class =middlestyle =overflow：hidden;>< img src =placekitten/400/400//>< / span> < span class =bottomstyle =overflow：hidden;>< img src =placekitten/400/400//>< / span>< / div> < div class =hexagon> < span class =top>< img src =placekitten/400/400//>< / span> < span class =middle>< img src =placekitten/400/400//>< / span> < span class =bottom>< img src =placekitten/400/400//>< / span>< / div> / pre>

这里是一个小提琴：jsfiddle/jnz31/kGSCA/

解决方案

使用CSS3几乎一切皆有可能： jsfiddle/kizu/bhGn4/

我使用了不同的旋转与 overflow：hidden ，所以你可以得到一个跨浏览器（井，现代交叉broser）可以覆盖和可点击的掩蔽区域。

Is there a chance to place an image inside a hexagon shape? I'm used to hexagonal shaped cells in html, but I could'nt get it filled with an (background?) image.

Here is what I have tried :

.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(placekitten/400/400/)"></span> <span class="middle" style="background: url(placekitten/400/400/)"></span> <span class="bottom" style="background: url(placekitten/400/400/)"></span> </div> <div class="hexagon"> <span class="top" style="overflow: hidden;"><img src="placekitten/400/400/" /></span> <span class="middle" style="overflow: hidden;"><img src="placekitten/400/400/" /></span> <span class="bottom" style="overflow: hidden;"><img src="placekitten/400/400/" /></span> </div> <div class="hexagon"> <span class="top"><img src="placekitten/400/400/" /></span> <span class="middle"><img src="placekitten/400/400/" /></span> <span class="bottom"><img src="placekitten/400/400/" /></span> </div>

here is a fiddle: jsfiddle/jnz31/kGSCA/

解决方案

With CSS3 almost everything is possible: jsfiddle/kizu/bhGn4/

There I used different rotations with overflow: hidden, so you can get a cross-browser (well, modern cross-broser) masks that even can be coverable and clickable on the masked area.