html / css六角形与图像里面 [英] html/css hexagon with image inside
问题描述
有机会将图像放在六边形内吗?
我习惯于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(http://placekitten.com/400/400/)>< / span> < span class =middlestyle =background:url(http://placekitten.com/400/400/)>< / span> < span class =bottomstyle =background:url(http://placekitten.com/400/400/)>< / span>< / div>< div class =hexagon ; < span class =topstyle =overflow:hidden;>< img src =http://placekitten.com/400/400//>< / span> < span class =middlestyle =overflow:hidden;>< img src =http://placekitten.com/400/400//>< / span> < span class =bottomstyle =overflow:hidden;>< img src =http://placekitten.com/400/400//>< / span>< / div> < div class =hexagon> < span class =top>< img src =http://placekitten.com/400/400//>< / span> < span class =middle>< img src =http://placekitten.com/400/400//>< / span> < span class =bottom>< img src =http://placekitten.com/400/400//>< / span>< / div>
/ pre>
这里是一个小提琴:http://jsfiddle.net/jnz31/kGSCA/
使用CSS3几乎一切皆有可能: http://jsfiddle.net/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(http://placekitten.com/400/400/)"></span>
<span class="middle" style="background: url(http://placekitten.com/400/400/)"></span>
<span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span>
</div>
<div class="hexagon">
<span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
<span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
<span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
</div>
<div class="hexagon">
<span class="top"><img src="http://placekitten.com/400/400/" /></span>
<span class="middle"><img src="http://placekitten.com/400/400/" /></span>
<span class="bottom"><img src="http://placekitten.com/400/400/" /></span>
</div>
here is a fiddle: http://jsfiddle.net/jnz31/kGSCA/
With CSS3 almost everything is possible: http://jsfiddle.net/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.
这篇关于html / css六角形与图像里面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!