css3 实现html样式蛇形布局

1. 实现效果

2. 实现代码

<template><div class="body"><div class="title">CSS3实现蛇形布局</div><div class="list"><div class="item" v-for="(item, index) in 20" :style="`--i: ${index}`"><span>{{ index + 1 }}</span></div></div></div>
</template><script>
export default {};
</script><style lang="scss" scoped>
.body {width: 100vw;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #de3730;.title {font-size: 25px;font-weight: bold;color: #fff;}.list {padding: 20px;display: flex;width: 100vw;gap: 40px;flex-wrap: wrap;.item {width: calc((100% - 120px) / 4);background: #00c297;color: #fff;font-size: 30px;border-radius: 5px;display: flex;flex-direction: column;align-items: center;justify-content: center;order: var(--i);padding: 10px;position: relative;span {text-align: center;font-size: 40px;font-weight: bold;}&::after {position: absolute;content: "=>";width: 18px;display: inline-block;font-size: 12px;top: 50%;transform: translateY(-50%);right: -30px;z-index: 1;color: #fff;font-weight: bold;font-size: 18px;}&:nth-child(8n + 5) {order: calc(var(--i) + 3);}&:nth-child(8n + 6) {order: calc(var(--i) + 1);}&:nth-child(8n + 7) {order: calc(var(--i) - 1);}&:nth-child(8n + 8) {order: calc(var(--i) - 3);}&:nth-child(8n + 4),&:nth-child(8n + 8) {&::after {position: absolute;left: 50%;top: 110%;font-weight: bold;transform: translateX(-50%) rotate(90deg);}}&:nth-child(8n + 5),&:nth-child(8n + 6),&:nth-child(8n + 7) {&::after {left: -32px;top: 50%;transform: rotate(180deg) translateY(50%);}}&:last-child {&::after {display: none;}}}}
}
</style>