【CSS案例】蜂巢布局

曹芷萌

已于 2024-05-15 10:28:55 修改

阅读量296

点赞数 5

分类专栏： CSS案例文章标签： css 前端

于 2024-05-15 10:18:15 首次发布

本文链接：https://blog.csdn.net/TheToysOfTown/article/details/138893931

版权

CSS案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

【CSS案例】蜂巢布局

效果图
HTML代码
CSS代码
工具网站

效果图

在这里插入图片描述

HTML代码

VSCode快速生成

div.container>div.line3>div.item10

<div class="container">
	<div class="line">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	<div class="line">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	<div class="line">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

CSS代码

body {
	/* 边距不设为0，左移的元素会加宽 */
	margin: 0;
	--ww: calc(100vw / 9);
}
.container {
	overflow: hidden;
}
.line {
	display: flex;
}
/* 偶数行左移 */
.line:nth-child(even) {
	margin-left: calc(var(--ww) / -2);
}
/* 第1行之后的元素上移 */
.line:nth-child(1)~.line {
	margin-top: -1.5vw;
}
.item {
	width: var(--ww);
	height: var(--ww);
	background: #000;
	/* 六边形裁剪 */
	clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
	/* 静态盒子取消压缩 */
	flex-shrink: 0;
}