英文:
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.
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: "";
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 -->
<div class="main">
<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>
<!-- 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 > 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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论