html/css 六边形，里面有图片 [英] html/css hexagon with image inside

问题描述

是否有机会将图像放置在六边形形状内?我习惯于html中的六角形单元格，但我无法理解填充了(背景?)图像.

这是我尝试过的:

.top {高度:0；宽度:0；显示:块；边框:20px纯红色；边框顶部颜色:透明；边框右色:透明；边框底色:红色；边框左颜色:透明；}.中间 {高度:20px；背景:红色；宽度:40px；显示:块；}.底部 {高度:0；宽度:0；显示:块；边框:20px纯红色；边框顶部颜色:红色；边框右色:透明；边框底色:透明；边框左颜色:透明；}

<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 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 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>

这是一个小提琴:http://jsfiddle.net/jnz31/kGSCA/

解决方案

CSS3 几乎一切皆有可能:http://jsfiddle.net/kizu/bhGn4/

我在overflow: hidden 中使用了不同的旋转，因此您可以获得跨浏览器(好吧，现代 跨浏览器)蒙版，甚至可以覆盖和可点击蒙版区域.

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屋！