html/css：如何创建六边形图像占位符

html/css: how to create a hexagonal image-placeholder

这(几乎)是我想要创建的：

HTML

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

.hexagon1 {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
width: 400px;
height: 200px;
margin: 0 0 0 -80px;
}

.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(http://placekitten.com/240/240);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

问题是，我需要在六边形上添加边框，如果可能的话，我想将图片放在 img-tag 中。我尝试在任一 div 上添加边框，但由于可见性隐藏或溢出隐藏属性，我只在六边形的顶部和底部添加了边框。

这是我目前在谷歌搜索时发现的：

http://csshexagon.com/

https://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3

https://github.com/web-tiki/responsive-grid-of-hexagons

我在 Stackoverflow 上也发现了一些关于这个问题的问题，但他们都没有解释如何精确地创建一个六边形。此外，示例中的六边形都站在边缘，这不是我想要的(如代码中所示)。我只需要一个六边形而不是网格。

当我试图改变示例的样式时，它总是以灾难性的混乱告终。这就是为什么我想知道如何创建和计算用于创建带有边框和内部图片的六边形的 div。

宽度与高度的比率是多少？

如何创建每边宽度相同的边框？

我必须将图片作为背景图像放置在哪里？

图片应该有多大(占 div 的百分比)？

创建六边形真正需要哪些变换？ (我看到了一个使用缩放、旋转和平移来获取图片的示例)

如何计算旋转？

如何计算所需的保证金？

由于我是网页设计的新手，有人可以尽可能简单地解释一下吗？如果有人可以根据上面的示例代码向我展示如何计算数字就足够了。我知道六边形的内角是 120°，仅此而已。

感谢您在期待中的帮助。 :)

编辑

我发现的另一页关于六边形，但只是为了创建形状，并没有真正将图像放入其中，也没有在其周围设置边框：

http://jtauber.github.io/articles/css-hexagon.html

相关讨论

所以你想要一个带有边框和图像的六边形？
你提到这个了吗？ stackoverflow.com/questions/31854185/…
@SahilDhir 是的，就像示例 csshexagon.com 一样，但转了大约 30 度(？)，所以它不会站在边缘而是站在一边。我刚才看了一下，好像挺复杂的。仔细查看它，我也没有真正看到有关如何创建它的解释。但是，我会研究它并尽快做出回应。感谢您的提示。
是的，对于刚接触网页设计的人来说，这有点复杂.. 只要做一些研究，你就可以掌握.. 快乐编码;)
@SahilDhir 问题是我没有太多时间来研究这个。我必须完成我需要的设计。如果可能的话，所有(大多数)浏览器也应该支持它。所以越容易越好。仍然看起来很有趣，我正在研究它。不管怎么说，还是要谢谢你。 ;) 如果其他人可以解释我如何创建六边形，我将非常感激。

我会推荐你??使用 SVG approach 来创建这个形状。它真的很容易，而且如果您正在考虑使用响应式 Web 布局，它可以很容易地实现。

Reason for this approach –

1。你不必写太多的 css。

2。内联 SVG 是现代 Web 方法。

3。可扩展且耐用。
4. 响应式

svg 中的 polygon 标记可制作您想要的形状，并且使用 css 我们可以定位我们想要实现的目标，例如在这种情况下的 border。 Image 已使用 pattern.

链接

Below is the snippet with example of what you need.

1
2
3
4
5
6
7
8
9

svg {
width: 30%;
margin: 0 auto;
}

#hex {
stroke-width: 2;
stroke: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关讨论

我以前从未使用过 SVG，我认为它确实是一个不错的解决方案，尽管我不得不说我必须进一步研究 SVG，因为我还不完全了解它是如何工作的。当尝试输入另一张没有背景的图片时，它可能比您在示例中使用的更大或更小，它的位置非常尴尬。有趣的是，当您将 viewbox 属性中的数字更改为更大的数字时，多边形会变小 ^^ 我会玩一点，但已经谢谢了:)
您能否向我解释一下如何使图片以多边形为中心？有什么诀窍吗？我通过尝试实现了它，但也许它可以计算出来？？！

遗憾的是，我将无法使用 svg 标签，因为六边形内的图像是由后端提供的，而我的老板刚刚告诉我它将无法提供所需的结构，很遗憾。但我肯定会更多地了解 SVG，因为我发现它真的很有趣，而且将来可能会有用。 :)
为了使图像居中，您可以设置 x,y 坐标或使用 transform:translate(x,y) 属性..
听到你不能使用这个很难过..我可以理解这个后端逻辑问题..还有其他解决方案，但为此你必须编写很多 css 代码。
CSS 代码并不是真正的问题。它只需要与后端一起工作，而 SVG 则不会。我只需要找到另一种方法来获得内部带有 img 的六边形。我可能不得不在谷歌上进一步搜索。也许我会遇到一个很好的解决方案…
让我们在聊天中继续这个讨论。

重要提示

请注意，此解决方案不适用于那些想要创建所有浏览器都支持的类似内容的人，因为目前 IE 不支持此示例中使用的 clip-path-property！！

感谢@SahilDhir，我找到了一种解决方法，尽管它更像是一种解决方法：

HTML

1	<img src=“http://lorempixel.com/g/600/400/”>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.poligon {
display: inline-block;
position: relative;
width: 200px;
height: 180px;
background: red;
box-sizing: border-box;
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.poligon img {
position: absolute;
top: 2px; /* equal to border thickness */
left: 2px; /* equal to border thickness */
width: 196px; /* container height – (border thickness * 2) */
height: 176px; /* container height – (border thickness * 2) */
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

请注意，我在这里没有计算太多，而是尝试实现六边形。

我的图片会有透明背景的问题，但我认为我可能会产生线性渐变来填充背景多边形。不过我得先试试看^^

我不会将此标记为最终答案，因为我的问题尚未得到真正的回答。我仍然希望能够创建一个六边形，就像我在上面给出的示例中那样，我可以按照我想要的方式调整高度和宽度以及边框厚度。

编辑

因为我没有找到更好的解决方案，所以我在这里改进了一个并找出了所需的计算：

HTML

1	<img src=“https://img.clipartfest.com/953d8641fe933437bbc41d48e6fc8492_yellow20stars20clipart-christmas-stars-clipart-without-background_532-506.png”>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.poligon {
display: inline-block;
position: relative;
width: 120px;
height: 103.92px; /* width * 0.866 */
background: red;
box-sizing: border-box;
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex-background {
position: absolute;
background-color: white;
top: 2px; /* equal to border thickness */
left: 2px; /* equal to border thickness */
width: 116px; /* container width – (border thickness * 2) */
height: 99.92px; /* container height – (border thickness * 2) */

-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.poligon img {
position: absolute;
width: 116px; /* container width – (border thickness * 2) */
height: 99.92px; /* container height – (border thickness * 2) */
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

如果你想要一个同边的六边形，那么剪辑路径部分是正确的。

Same-sided

通过上面的图片，您可以看到我是如何找到这些数字的；) 如果您对此还有其他问题，请随时提问。我会尽量解释清楚。

相关讨论

我会建议你使用 svg 方法 .. 我会尽快回答！

我需要类似的东西，最简单的方法是使用两个六边形，一个在另一个之上。

使用 CSS 形状提供的形状：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

#hexagon1 {
width: 100px;
height: 55px;
background: red;
position: absolute;
z-index: 2;
}
#hexagon1:before {
content:“”;
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon1:after {
content:“”;
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}

#hexagon2 {
width: 101px;
height: 56px;
background: black;
position: relative;
z-index: 1;
}
#hexagon2:before {
content:“”;
position: absolute;
top: -26px;
left: 0;
width: 0;
height: 0;
border-left: 51px solid transparent;
border-right: 51px solid transparent;
border-bottom: 26px solid black;
}
#hexagon2:after {
content:“”;
position: absolute;
bottom: -26px;
left: 0;
width: 0;
height: 0;
border-left: 51px solid transparent;
border-right: 51px solid transparent;
border-top: 26px solid black;
}

这是我为您制作的 CodePen：http://codepen.io/vogelbeere/pen/peYjNe

相关讨论

这是我为我的移动应用程序制作的带边框的 12 角星：codepen.io/vogelbeere/pen/peYgOq
这不是一个糟糕的方法，但我从上面的代码中意识到，将一个 div 放在另一个 div 上并不会产生恒定的边框，这意味着边框在每一侧的厚度都不相同。我不知道为什么会发生这种情况，但我可以想象这是因为浏览器的分辨率或渲染。
是的，我不太确定它为什么会这样做。对于我的十二角星，它产生了轻微的浮雕效果，我很喜欢，所以没关系。
是的，星星看起来像是 3d 的。我对这种解决方案还有另一个问题，因为里面的图片可能有也可能没有透明背景。如果有的话，我将不得不将 3 个六边形放在一起，一个用于边框，一个用于将内部设置为与背景相同的颜色，第三个带有相当复杂的图片…非常感谢虽然为了你的回应。 :)
是的，我后来意识到将图像放在六边形中并不太适用

来源：https://www.codenong.com/43183416/

html/css: how to create a hexagonal image-placeholder

猜你喜欢