乐趣区

css-环形六边形布局

最终效果

使用 flex 布局,将上图分为三列。

第一列两个图片、第二列三个图片、第三列两个。

在写出 html 页面之前,应该了解到该页面是由数据动态渲染的,所以应该把从后端接受来的数据变成对应的格式。例如:

把改造好的数据放入 html 中用 map 进行遍历即可。

页面:

首先要把图片变成六边形:clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);

然后把 wrapper 设置为 flex 布局,flex-direction: column、align-items:center。

列之间设置一个 margin-right 使得之间有间隙

退出移动版