使用CSS实现六边形效果

实现思路

1. 使用grid进行布局, 水平、垂直居中显示
2. 使用clip-path: polygon() 来绘制图片六边形
3. 使用transform: translate()定位六边形的位置
4. 使用filter: grayscale(80%)对图片进行滤镜, 将图片转为灰度图像
5. 鼠标浮动缩放效果

1、网格布局grid
兼容性查看.

要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。
网格容器内放置着由列和行内组成的网格元素。

属性:
1、grid-template-columns 定义了网格布局中的列的数量，它也可以设置每个列的宽度。

2、grid-template-rows 定义了网格布局中的行的数量，它也可以设置每一行的高度。

3、grid-areas 指定网格元素在网格布局中的大小和位置, 是以下属性的简写属性: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

4、justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

5、align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。

6、place-content 属性指定网格元素水平、垂直方向元素分布方式

2、函数
兼容性查看.

定义: var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

语法: var(custom-property-name, value)

实例:

:root {
	--main-bg-color: coral;
}
#div1 {
	background-color: var(--main-bg-color);
}

3、clip-path
使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

整体代码实现：

<template>
    <div class="gallery-container">
        <div class="gallery">
            <div class="hexagon" v-for="(item, index) in hexagonList" :key="index">
                <h2>{{ item.title }}</h2>
                <img :src="item.img" />
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { ElMessage } from 'element-plus'
export default defineComponent({
    name: "demo",
    data() {
        return {
            hexagonList: [{
                title: "一",
                img: "https://picsum.photos/id/106/300/300",
            },{
                title: "二",
                img: "https://picsum.photos/id/136/300/300",
            },{
                title: "三",
                img: "https://picsum.photos/id/1039/300/300",
            },{
                title: "四",
                img: "https://picsum.photos/id/110/300/300",
            },{
                title: "五",
                img: "https://picsum.photos/id/1047/300/300",
            },{
                title: "六",
                img: "https://picsum.photos/id/1057/300/300",
            },{
                title: "七",
                img: "https://picsum.photos/id/1057/300/300",
            },{
                title: "八",
                img: "https://picsum.photos/id/1040/300/300",
            },{
                title: "九",
                img: "https://picsum.photos/id/136/300/300",
            },{
                title: "十",
                img: "https://picsum.photos/id/1039/300/300",
            },{
                title: "十一",
                img: "https://picsum.photos/id/110/300/300",
            },{
                title: "十二",
                img: "https://picsum.photos/id/1047/300/300",
            },{
                title: "十三",
                img: "https://picsum.photos/id/1057/300/300",
            },{
                title: "十四",
                img: "https://picsum.photos/id/1057/300/300",
            }]
        };
    },
    methods: {
        
    },
})
</script> 

<style lang="scss" scoped>
.gallery-container {
    min-height: 100vh;
    display: grid;
    place-content: center; /* 水平垂直方向居中 */
    background: #aabbfb;
    .gallery {  
        --s: 120px; /* control the size */
        --g: 2px; /* control the gap */
        display: grid;
        .hexagon {
            grid-area: 1/1; /* 规定从第一行第一列开始显示项目 */
            width: var(--s);
            aspect-ratio: 1.15; /* 宽高比例缩放 */
            object-fit: cover; /* 保持图片原有比例, 会有剪切*/
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
            transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1)); /* 对图片进行移动和缩放 */
            cursor: pointer;
            filter: grayscale(80%); /* 灰度滤镜 */
            transition: 0.2s linear; /* 过渡效果 */
            position: relative;
            &:hover {
                filter: grayscale(0);
                z-index: 1;
                --_t: 1.1;
            }
            img{
                width: 100%;
                height: 100%;
                margin-bottom: -4px;
            }
            h2{
                width: 100%;
                text-align: center;
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                color: #fff;
            }
            &:nth-child(1) {
                --_y: calc(-100% - var(--g));
            }
            &:nth-child(3),
            &:nth-child(5),
            &:nth-child(10) {
                --_x: calc(-75% - 0.87 * var(--g));
            }
            &:nth-child(4),
            &:nth-child(6),
            &:nth-child(12) {
                --_x: calc(75% + 0.87 * var(--g));
            }
            &:nth-child(3),
            &:nth-child(4) {
                --_y: calc(-50% - 0.5 * var(--g));
            }
            &:nth-child(5),
            &:nth-child(6) {
                --_y: calc(50% + 0.5 * var(--g));
            }
            &:nth-child(7) {
                --_y: calc(100% + var(--g));
            }
            &:nth-child(8),
            &:nth-child(9) {
                --_x: calc(-155% + 2 * var(--g));
            }
            &:nth-child(9) {
                --_y: calc(100% + var(--g));
            }
            &:nth-child(10),
            &:nth-child(12) {
                --_y: calc(150% + var(--g));
            }
            &:nth-child(11) {
                --_y: calc(200% + var(--g));
            }
            &:nth-child(13),
            &:nth-child(14) {
                --_x: calc(155% - 2 * var(--g));
            }
            &:nth-child(13){
                --_y: calc(100% + var(--g));
            }
        }
    }
}
</style>