html/css 六边形，里面有图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7433454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html/css hexagon with image inside
提问by honk31
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.
是否有机会将图像放置在六边形形状内？我习惯了 html 中的六角形单元格，但我无法用（背景？）图像填充它。
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/
这是一个小提琴：http: //jsfiddle.net/jnz31/kGSCA/
回答by kizu
With CSS3 almost everything is possible: http://jsfiddle.net/kizu/bhGn4/
使用 CSS3 几乎一切皆有可能：http: //jsfiddle.net/kizu/bhGn4/
There I used different rotations with overflow: hidden, so you can get a cross-browser (well, moderncross-broser) masks that even can be coverable and clickable on the masked area.
在那里我使用了不同的旋转overflow: hidden，因此您可以获得跨浏览器（好吧，现代跨浏览器）蒙版，甚至可以在蒙版区域上覆盖和单击。
回答by web-tiki
The most flexible way of achieving a hexagon with an image is to use an inline SVG:
使用图像实现六边形的最灵活方法是使用内联 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://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.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>There are at least two ways of achieving the hexagonal image with SVG :
至少有两种方法可以使用 SVG 实现六边形图像：
- making an hexagonal polygon and filling the polygon with an image and the
patternelement (approach I use in the previous snippet) - clipping the image with an hexagonal polygon (see next snippet)
- 制作一个六边形多边形并用图像和
pattern元素填充多边形（我在上一个片段中使用的方法） - 用六边形多边形裁剪图像（见下一个片段）
svg{width:30%}<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="hexClip">
<polygon points="50 1 99 25 99 75 50 99 1 75 1 25"/>
</clipPath>
</defs>
<image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" clip-path="url(#hexClip)"/>
</svg>The SVG approach allows control over many aspects of the hexagon shape and image. And they can be styled with CSS. Here is an example :
SVG 方法允许控制六边形形状和图像的许多方面。它们可以使用 CSS 进行样式设置。这是一个例子：
svg{
width:30%;
margin:0 auto;
}
#hex{
stroke-width:2;
stroke: teal;
fill-opacity:0.6;
transition:fill-opacity .8s;
}
#hex:hover{
fill-opacity:1;
}
#text{
stroke-width:0.5;
stroke:teal;
fill-opacity:0.4;
fill:teal;
transition:fill-opacity .8s;
}
#hex:hover + #text{
fill-opacity:1;
}<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://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
<text id="text" font-size="20" x="50" y="50" text-anchor="middle">Some text</text>
</svg>For another approach to make hexagons with an image inside check this question : Responsive grid of hexagons
对于另一种制作带有内部图像的六边形的方法，请检查此问题：响应式六边形网格
回答by Mohammad Usman
A new and easy approach would be to use css3 clip-pathproperty.
一种新的简单方法是使用 css3clip-path属性。
From Documentation:
从文档：
The clip-path CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed i.e, only a specific region of the element is displayed.
clip-path CSS 属性通过定义要显示的剪辑区域来防止显示元素的一部分，即仅显示元素的特定区域。
Following css will show a rectangular element in hexagon shape:
以下 css 将显示一个六边形的矩形元素：
div.hexagon {
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
Output Image:
输出图像：
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>We can use this property to draw any shapes that we want. Below are a couple of examples:
我们可以使用这个属性来绘制我们想要的任何形状。下面是几个例子：
div.pentagon {
clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
}
div.octagon {
clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
}
Output Image:
输出图像：
body {
background: linear-gradient(orange, yellow);
min-height: 100vh;
margin: 0;
}
div {
background: url("https://i.imgur.com/waDgcnc.jpg") no-repeat;
background-size: cover;
margin: 10px 20px;
height: 170px;
width: 170px;
float: left;
}
.pentagon {
clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
}
.octagon {
clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
}<div class="pentagon">
</div>
<div class="octagon">
</div>Note:
clip-pathcss property is not supported in IE and Edge. However future versions of Edge are expected to have support for this property.
注意：
clip-pathIE 和 Edge 不支持 css 属性。但是，预计 Edge 的未来版本将支持此属性。
回答by Eric
You can do it by overlaying corners like this:
你可以通过像这样叠加角来做到这一点：
http://jsfiddle.net/Eric/kGSCA/3/
http://jsfiddle.net/Eric/kGSCA/3/
HTML:
HTML：
<div class="hexagon pic">
<span class="top"></span>
<span class="bottom"></span>
</div>
CSS:
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;
}
回答by Soyoes
here is a simple way if you need only one pic to place.
如果您只需要放置一张图片，这是一种简单的方法。
<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>
need a border ? a background img will be easier & faster.
需要边框吗？背景 img 将更容易和更快。
<div class="hex">
<div style="position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px;
z-index:2;background-image:url(/images/hexagon.png);">
</div>
</div>
回答by Ricardo
I don't know if it's the answer you're looking for but you could lay a hexagon shaped transparent .png over the image you want to be a hexagon and let it act like a mask.
我不知道这是否是您正在寻找的答案，但您可以在想要成为六边形的图像上放置一个六边形透明 .png 并让它像面具一样。
Just simply put the transparent png over the image with z-index
只需简单地使用 z-index 将透明 png 放在图像上
回答by Spudley
I don't think there's a way to do it with pure HTML/CSS without any external graphics. There may be some clever hacks using the techniques you linked to in the question, but they would be just that - clever hacks - so probably not best suited to use in a live web site (and as with most 'clever hacks', also probably with at least some cross-browser compatibility issues).
我不认为有一种方法可以在没有任何外部图形的情况下使用纯 HTML/CSS 来实现。可能有一些聪明的黑客使用您在问题中链接的技术，但它们就是这样 - 聪明的黑客 - 所以可能不适合在实时网站中使用（与大多数“聪明的黑客”一样，也可能至少有一些跨浏览器兼容性问题）。
You could do it with Canvas or SVG.
您可以使用 Canvas 或 SVG 来实现。
Canvas is a bitmap graphics feature, and part of the HTML5 spec. SVG is a vector graphics language which can be used within an HTML page.
Canvas 是位图图形功能，是 HTML5 规范的一部分。SVG 是一种矢量图形语言，可以在 HTML 页面中使用。
Both of these are features of modern browsers, and are therefore sadly lacking in most versions of Internet Explorer (IE8 and earlier).
这两个都是现代浏览器的功能，因此遗憾的是大多数版本的 Internet Explorer（IE8 及更早版本）都没有。
Fortunately, however, IE does support a language similar to SVG called VML, and there are a number of javacript libraries that allow IE to use both Canvas and SVG by converting them to VML.
然而，幸运的是，IE 确实支持一种类似于 SVG 的语言，称为 VML，并且有许多 javacript 库允许 IE 通过将 Canvas 和 SVG 转换为 VML 来使用它们。
See also:
也可以看看：
With any of the tools linked above, you could then use Canvas or SVG to draw a hexagonal (or any other) shape, and fill it with your graphic.
使用上面链接的任何工具，然后您可以使用 Canvas 或 SVG 绘制六边形（或任何其他）形状，并用您的图形填充它。
Hope that helps.
希望有帮助。
