最终效果
使用 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 使得之间有间隙