如何使用CSS制作蜂窝网格?

huangapple go评论61阅读模式
英文:

How do I make a honeycomb grid using CSS?

问题

我需要创建一个蜂窝格子在这个网格中填充有红色的9个蜂窝应该始终位于屏幕宽度改变时的中心位置

更像是我的目标是拥有与 background-size: cover / object-fit: cover 相同的效果但是针对容器/元素所以如果宽度变小黑色蜂窝会溢出到屏幕因此红色蜂窝始终位于中心

这是我目前使用的基础但我似乎无法实现 background-size: cover 的效果而且这个示例是使用 inline所以当宽度变小时行会不断添加而我想避免这种情况

.main {
  display: flex;
  --s: 100px;
  /* 大小 */
  --m: 4px;
  /* 边距 */
  --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
}

.container {
  font-size: 0;
  /* 禁用内联块元素之间的空白 */
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547);
  display: inline-block;
  font-size: initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  background: red;
  margin-bottom: calc(var(--m) - var(--s)*0.2885);
}

.container div:nth-child(odd) {
  background: green;
}

.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 120%;
  shape-outside: repeating-linear-gradient( #0000 0 calc(var(--f) - 3px), #000 0 var(--f));
}
英文:

I need to create a honeycomb grid wherein the 9 honeycomb filled with red color should always be at center when the screen width changes.

More likely my goal is to have the same effect as background-size: cover / object-fit: cover but for container / elements, so the black honeycomb will just overflow to the screen if the width has become smaller therefore the red honeycomb will always be at center.

如何使用CSS制作蜂窝网格?

This is what I am currently using as basis but I can't seem to the background-size: cover effect + this example is using inline to, so as the width becomes smaller the rows just keeps adding which I want to avoid.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.main {
display: flex;
--s: 100px;
/* size  */
--m: 4px;
/* margin */
--f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
}
.container {
font-size: 0;
/*disable white space between inline block element */
}
.container div {
width: var(--s);
margin: var(--m);
height: calc(var(--s)*1.1547);
display: inline-block;
font-size: initial;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background: red;
margin-bottom: calc(var(--m) - var(--s)*0.2885);
}
.container div:nth-child(odd) {
background: green;
}
.container::before {
content: &quot;&quot;;
width: calc(var(--s)/2 + var(--m));
float: left;
height: 120%;
shape-outside: repeating-linear-gradient( #0000 0 calc(var(--f) - 3px), #000 0 var(--f));
}

<!-- language: lang-html -->

&lt;div class=&quot;main&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

你实际需要的是两行居中的元素,其中第二行略微偏移。你不需要那个复杂的代码(顺便说一下,这是我制作的)。

我在第一个容器中使用了15个元素,在第二个容器中使用了14个元素(减去一个)。你可以添加任意数量的元素,但必须更新选择器以正确着色你的9个元素。

<div class="container">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
.container {
  overflow: hidden;
} 
.container > div {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.container > div > div {
  width: 80px;
  aspect-ratio: 0.866;
  flex-shrink: 0;
  clip-path: polygon(0 25%,50% 0,100% 25%,100% 75%,50% 100%,0 75%);
  background: black;
}
.container > div:last-child {
   transform: translateY(calc(6px - 25%));
}

.container > div > div:nth-child(6),
.container > div > div:nth-child(7),
.container > div > div:nth-child(8),
.container > div > div:nth-child(9),
.container > div > div:nth-child(10) {
  background: red;
}
.container > div:last-child > div:nth-child(10) {
  background: black;
}

这是你提供的代码的翻译部分。

英文:

What you actually need is two rows of centered elements where the second row is slightly shifted. You don't need that complex code (which I made btw).

I have used 15 elements on the first container and 14 on the second one (minus one). You can add as many element as you want but you have to update the selector to correctly color your 9 elements.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
overflow: hidden;
} 
.container &gt; div {
display: flex;
gap: 6px;
justify-content: center;
}
.container &gt; div &gt; div {
width: 80px;
aspect-ratio: 0.866;
flex-shrink: 0;
clip-path: polygon(0 25%,50% 0,100% 25%,100% 75%,50% 100%,0 75%);
background: black;
}
.container &gt; div:last-child {
transform: translateY(calc(6px - 25%));
}
.container &gt; div &gt; div:nth-child(6),
.container &gt; div &gt; div:nth-child(7),
.container &gt; div &gt; div:nth-child(8),
.container &gt; div &gt; div:nth-child(9),
.container &gt; div &gt; div:nth-child(10) {
background: red;
}
.container &gt; div:last-child &gt; div:nth-child(10) {
background: black;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
&lt;div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月19日 22:55:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/75500998.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定