.mask-hexagon {
    -webkit-mask-image: url("data:image/svg+xml,svg width='182' height='201' xmlns='http://www.w3.org/2000/svg' path d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/></svg>");
    mask-image: url("data:image/svg+xml,svg width='182' height='201' xmlns='http://www.w3.org/2000/svg' path d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/></svg>")
}

.el{background: linear-gradient(to right, #000000, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0)); transform: translateZ(0);}

<meta name="viewport" content="width=device-width,minimum-scale=.3,maximum-scale=.3,initial-scale=.3,user-scalable=no">

/*filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()*/
.ae{filter: blur(2px);transition: .3s;}
/*明度*/
.be{filter: brightness(120%);transition: .3s;}
/*对比度*/
.ce{filter: contrast(80%);transition: .3s;}
/*阴影*/
.de{filter: drop-shadow(0 0 5px rgba(0,0,0,.6));transition: .3s;}
/*灰度*/
.ee{filter:grayscale(100%);transition: .3s;}
/*色相旋转0-360deg*/
.fe{filter: hue-rotate(45deg);transition: .3s;}
/*图形颜色反转*/
.ge{filter: invert(100%);transition: .3s;}
/*透明度，浏览器可提供硬件加速*/
.he{filter: opacity(.5);transition: .3s;}
/*饱和度*/
.ie{filter:saturate(20%);transition: .3s;}
/*转棕色复古*/
.je{filter:sepia(100%);transition: .3s;}