投稿
  1. 云图网首页
  2. 技术专区

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

• 技术专区 • 阅读 42

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

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

HTML

1
 

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

我会推荐你??使用 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 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://dummyimage.com/600×400/red/fff" 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)"/>
</svg>

<svg viewbox="0 0 200 200" 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="-40" width="150" height="100" />
      </pattern>
    </defs>
    <polygon id="hex" points="25 8 75 8 100 50 75 92 25 92 0 50" fill="url(#img)" />
  </svg>

重要提示

请注意，此解决方案不适用于那些想要创建所有浏览器都支持的类似内容的人，因为目前 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

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

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/269174.html

赞 (0)
0 0
上一篇 2022年6月20日 17:57
下一篇 2022年6月20日 17:57

相关推荐

发表回复

登录后才能评论