Html 像蜂窝一样的DIV布局

.container {
display: grid;
grid-template-columns: repeat(auto-fit, 50px);
grid-template-rows: repeat(auto-fit, minmax(80px, 80px));
width: auto;
justify-content: center;
grid-auto-rows: 80px;
margin-bottom: 30px;
width: 322px;
height: auto;
}

.container  > * {
-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.block {
position: relative;
height: 100px;
background-color: #fff2aa;
grid-column: 2 span;
display: flex;
align-items: center;
justify-content: center;
}

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

.container {
  display: grid;
  margin: 150px;
  width: 150px;
  aspect-ratio: 1.15;
}

.block {
  grid-area:1/1;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
  background-color: #fff2aa;
  box-shadow: inset 0 0 50px 25px #ff9a0073;
}

.container > :nth-child(1) {
  transform: translateY(100%);
}
.container > :nth-child(2) {
  transform: translateY(-100%);
}
.container > :nth-child(3) {
  transform: translate(-75%,-50%)
}
.container > :nth-child(4) {
  transform: translate(75%,-50%)
}
.container > :nth-child(5) {
  transform: translate(75%,50%)
}
.container > :nth-child(6) {
  transform: translate(-75%,50%)
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Html相关问答推荐

使用Scrapy Select 最后一个子文本

在浮动元素旁边垂直居中

如何在一张表中逃脱边境坍塌--崩溃？

在窄屏幕上显示表格，每个单元格占一行

每个元素的CSS网格高度相等，以保持响应性

如何更改Django中的默认按钮？

Html视频标签：圆角像素化

carousel 的垂直滚动按钮居中

是否可以只使用css而不使用像&；nbsp；这样的HTML符号来实现断字而不换行空格？

如何防止滑动滚动元素时touch 屏出现空白区域？

Swift 以编程方式在 YouTube 嵌入视频中进入全屏

如何使用 Tailwind CSS 分隔导航栏中的元素？

将箭头图标添加到工具提示包装器时遇到问题

如何只为 Navbar 中的一个元素提供动画，其余元素没有使用 css 的动画

标签背景 colored颜色 的 html 和 css 技巧说明

如何从 razor 页面打开 html 页面

使用 CSS flexbox 和溢出顶部而不是底部

变换元素以适应高度(Angular，SCSS)

当另一个 div 的高度改变或执行其内容的换行时，将 flex 方向更改为列

AWS SES：如何正确使用 CSS