首先想要实现这种效果，你需要知道需要创建很多标签，起步500以上哈。
知识点
- clip-path 路径剪切属性
.clippath {
--w: 100px;
width: var(--w);
height: calc(var(--w) * 1.1547);
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background: deeppink;
margin: auto;
}
- shape-outside 设置浮动元素周围内联元素对其包裹的形状，也就是说借助
shape-outside属性可以使得浮动元素:float周围的文字不再是围绕盒模型进行环绕，而是可以指定任意形状进行环绕，达到更丰富的文字环绕效果
- shape-outside:repeating-linear-gradient 创建一个重复线性的背景用于浮动偏移，每
80px一个间隔100-80=20px高的线性样式，其中20px高的位置用于围绕周围的六边形
shape-outside: repeating-linear-gradient(
transparent 0,
transparent 80px,
#000 80px,
#000 100px
);
参数配置
:root {
// 可配置参数
--m: 1px; /* margin 六边形之间的间距 */
//以下不建议配置
--s: 50px; /* size 一般为50，调整其它尺寸可能需要调整最优倍数 */
// 1.732为尝试出来的最优倍数，避免造成六边形浮动不统一
--f: calc(
1.732 * var(--s) + 4 * var(--m) - 1px
); //生成由 六边形高度，六边形间距换算来的浮动隔板的高度
}
在线代码
完整代码
<template>
<div class="body">
<div class="wrap">
<li v-for="item in 800" :key="item"></li>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" >
:root {
// 可配置参数
--m: 1px; /* margin 六边形之间的间距 */
//以下不建议配置
--s: 50px; /* size 一般为50，调整其它尺寸可能需要调整最优倍数 */
// 1.732为尝试出来的最优倍数，避免造成六边形浮动不统一
--f: calc(
1.732 * var(--s) + 4 * var(--m) - 1px
); //生成由 六边形高度，六边形间距换算来的浮动隔板的高度
}
.body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.wrap {
position: relative;
margin: auto;
width: 120%;
transform: translateX(-10%) scale(1.1);
height: 100vh;
font-size: 0;
background: #fff;
overflow: hidden;
&::before {
content: "";
height: 100%;
width: 26px; //浮动隔板长度
// 浮动隔板间距80px 浮动隔板高度 --f
shape-outside: repeating-linear-gradient(
transparent 0,
transparent 80px,
#000 80px,
#000 var(--f)
);
float: left;
}
}
li {
width: var(--s);
height: calc(var(--s) * 1.1547);
background: #f1c929;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
margin: var(--m);
margin-bottom: calc(var(--m) - var(--s) * 0.2885); //计算出每个六边形需要往上偏移的距离
display: inline-block;
}
li:nth-child(2n + 1) {
background: #f19e29;
}
</style>
