Html 如何使用 CSS 制作蜂窝状网格

发布于02月20日

我需要创建一个蜂窝网格，其中9填充红色蜂窝应该总是在中心时，屏幕宽度变化.

更有可能的是，我的目标是获得与Backging-Size:Cover/Object-Fit:Cover相同的效果，但对于容器/元素，这样如果宽度变小，黑色蜂窝就会溢出到屏幕上，因此红色蜂窝将始终位于中心.

这就是我目前使用的基础，但我看不到背景-Size:Cover Effect+这个例子使用的是inline to，所以随着宽度变小，行不断增加，这是我想要避免的.

.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));
}

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

.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; }

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

Html 如何使用 CSS 制作蜂窝状网格

推荐答案

Html相关问答推荐

Rmarkdown上的垂直标签集

需要帮助实现悬停动画效果

在元素之间添加空格

损坏的可点击html邮箱签名

我应该怎么做才能显示出整个字符串？

如何翻转卡片图像的背面

平移变换下的SVG剪辑路径行为

Flexbox在元素之间造成了太大的差距

如何将文本环绕心形(而不仅仅是圆形)？

使用CSS和Slick Carcass使图像适合屏幕

可以'；t使我的导航栏在HTML/CSS中正确对齐

rvest： Select 不包含链接的段落(<；p>；)

我的 *ngFor 中的 array.reverse() 在生产中不起作用

标题在实时网站上闪烁

带标签 css 的 div 内的中心图标

如何让一个 div 始终贴在容器的边缘？

为什么在使用src与srcdoc时 iframe 内容高度呈现不同？

我如何让这个动画播放，然后停止，然后在设定的时间后再次播放？ (CSS)

如何让 Reindeer 居中

如何使具有两个元素的 div 行在移动设备中响应