内部图像的HTML / CSS六angular形
有没有机会将图像放置在六angular形内？ 我已经习惯了HTML中的六angular形单元格 ，但是我不能让它填充（背景）图像。
这是我所尝试的：
.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>
这里是一个小提琴： http : //jsfiddle.net/jnz31/kGSCA/
随着CSS3几乎一切都是可能的： http : //jsfiddle.net/kizu/bhGn4/
在那里，我使用了不同的overflow: hidden循环overflow: hidden ，所以你可以得到一个跨浏览器（好， 现代跨梭）掩模，甚至可以掩盖的地区，可以coverable和点击。
实现带图像的六边形最灵活的方法是使用内联SVG ：
svg{ width:30%; }
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" /> </pattern> </defs> <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/> </svg>
你可以通过覆盖这样的angular落来做到这一点：
http://jsfiddle.net/Eric/kGSCA/3/
HTML：
<div class="hexagon pic"> <span class="top"></span> <span class="bottom"></span> </div>
CSS：
.hexagon { background: url(http://placekitten.com/400/400/); width: 400px; height: 346px; position: relative; } .hexagon span { position: absolute; display: block; border-left: 100px solid red; border-right: 100px solid red; width: 200px; } .top { top: 0; border-bottom: 173px solid transparent; } .bottom { bottom: 0; border-top: 173px solid transparent; }
这里是一个简单的方法，如果你只需要一个图片放置。
<style> .hex{ width:80px; height:80px; background-image: url(http://placekitten.com/400/400/); background-size: cover; position:relative; margin:10px; } .hex:before, .hex:after{ content:""; position:absolute; top:0px;height:40px;width:0px; /* 40 = height/2 */ z-index:1; border:20px solid #FFF; /*change #FFF to your bg color*/ } .hex:before{ left:-20px; /* -1*borderWidth */ border-right:40px solid transparent;/* width/2 */ } .hex:after{ left:40px; /* width/2 */ border-left:40px solid transparent;/* width/2 */ } </style> <div class="hex"></div>
需要一个边界？ 一个背景img会更容易和更快。
<div class="hex"> <div style="position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px; z-index:2;background-image:url(http://img.dovov.comhexagon.png);"> </div> </div>
一个新的和简单的方法是使用css3 clip-path属性。
从文档 ：
剪辑pathCSS属性通过定义要显示的剪辑区域来防止显示元素的一部分，即仅显示元素的特定区域。
下面的CSS将显示一个六angular形的矩形元素：
div.hexagon { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
输出图像：
body { background: linear-gradient(orange, yellow); min-height: 100vh; margin: 0; } .hexagon { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: url("https://i.imgur.com/waDgcnc.jpg") no-repeat; background-size: cover; margin: 10px auto; height: 200px; width: 200px; }
<div class="hexagon"> </div>
我不知道这是否是你正在寻找的答案，但你可以在你想要成为一个六angular形的图像上放置一个六angular形的透明.png，让它像一个面具。
只需简单地将透明png放在z-index图片上即可
我不认为有一种方法可以在没有任何外部graphics的情况下使用纯HTML / CSS。 可能会有一些聪明的黑客利用你在这个问题上链接到的技术，但他们会是这样 – 聪明的黑客 – 所以可能不是最适合在实时网站中使用（和大多数“聪明的黑客”一样，也可能至less有一些跨浏览器兼容性问题）。
你可以用Canvas或SVG来完成。
canvas是一个位图graphicsfunction，并且是HTML5规范的一部分。 SVG是一种vectorgraphics语言，可以在HTML页面中使用。
这两个都是现代浏览器的function，因此可悲的是在大多数版本的IE浏览器（IE8和更早版本）中缺乏。
幸运的是，IE确实支持一种类似于SVG的语言，称为VML，并且有许多javacript库允许IE通过将Canvas和SVG转换为VML来使用Canvas和SVG。
也可以看看：
- 如何在IE中使用HTML5 canvas元素？
- http://code.google.com/p/svg2vml/
- http://raphaeljs.com/
使用上面链接的任何工具，然后可以使用Canvas或SVG绘制六边形（或任何其他）形状，并用graphics填充它。
希望有所帮助。
使用此网站并创build自定义六angular形： csshexagon.com
