如何在多边形图层中实现多边形镂空（替代圆形镂空效果）

我需要在多边形图层中剪出一个多边形镂空区域，以显示底层背景。目前已通过径向渐变实现圆形镂空，但希望将圆形替换为多边形镂空，使图层保留底色且中间为镂空状态，最终效果需保证镂空区域透明（因页面存在背景图）。

现有代码 #

HTML #

<div class="main-hexaconb first-level" style="--r: 0.9; --mv: -1px; --v: 0.5; --s: 200px;">
    <div class="container">
        <div class="hexagon hexagons-first-level">
            <div class="hexagon-frontend-middle">       
            </div>
        </div>
    </div>
</div>

CSS #

.main-hexaconb {
    display: flex;
    --s: 100px;
    --r: 1;
    --h: 0.25;
    --v: 0.35;
    --hc: calc(clamp(0, var(--h), 0.5) * var(--s));
    --vc: calc(clamp(0, var(--v), 0.5) * var(--s) * var(--r));
    --mv: 4px;
    --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2);
    --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px);
}

.container div {
    width: var(--s);
    margin: var(--mv) var(--mh);
    height: calc(var(--s) * var(--r));
    display: inline-flex;
    font-size: initial;
    -webkit-clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc));
    clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc));
    margin-bottom: calc(var(--mv) - var(--vc));
    transition: opacity 0.5s;
    cursor: pointer;
    justify-content: center;
    align-content: center;
    opacity: 0.3;
}

.container::before {
    content: "";
    width: calc(var(--s) / 2 + var(--mh));
    float: left;
    height: 135%;
    shape-outside: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 calc(var(--f) - 2px), #000 0 var(--f));
}

.container div:not(.hexagon-frontend-middle)>*:not(.hexaconb-img) {
    position: absolute;
    max-width: var(--s);
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: calc(var(--s) - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.container .hexagon-frontend-middle> :not(.hexaconb-img) {
    position: relative;
    max-width: var(--s);
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: calc(var(--s) - 60px);
    word-break: break-word;
}


.hexagon:before {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: "";
    transform: rotate(60deg);
}

.hexagon:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: "";
    transform: rotate(-60deg);
}

.hexagon-frontend-middle {
    background-image: radial-gradient(circle 30px at calc(100% - 101px) calc(100% - 90px), transparent 80px, white 0px);
    max-height: unset !important;
    width: 100%;
    margin: 1px !important;
    opacity: 1 !important;
}

当前效果 #

预期效果 #

要实现多边形镂空，推荐使用CSS的mask属性（配合polygon和subtract模式），可以精准定义镂空形状，同时保证镂空区域完全透明透出底层背景。

替换原CSS中.hexagon-frontend-middle的样式为以下代码：

.hexagon-frontend-middle {
    background: white;
    /* 定义外层六边形和内层镂空多边形坐标，subtract模式会挖空内层区域 */
    -webkit-mask: polygon(
        /* 外层六边形坐标，与父元素clip-path保持一致 */
        var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc),
        /* 内层镂空多边形（示例为小六边形，可自行调整坐标修改形状/位置） */
        25% 15%, 75% 15%, 90% 50%, 75% 85%, 25% 85%, 10% 50%
    );
    mask: polygon(
        var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc),
        25% 15%, 75% 15%, 90% 50%, 75% 85%, 25% 85%, 10% 50%
    );
    -webkit-mask-mode: subtract;
    mask-mode: subtract;
    /* 保留原有样式 */
    max-height: unset !important;
    width: 100%;
    margin: 1px !important;
    opacity: 1 !important;
}

说明 #

1. 核心原理：通过polygon同时定义外层显示区域和内层镂空区域，mask-mode: subtract会将内层区域从外层中剔除，形成镂空效果。
2. 自定义调整：可以修改内层多边形的坐标值（如25% 15%），调整镂空区域的大小、位置和形状，完全匹配预期效果。
3. 兼容性：现代主流浏览器均支持mask属性，若需兼容旧版浏览器，可采用clip-path结合伪元素叠加的方案，但mask实现更简洁直观。

内容的提问来源于stack exchange，提问作者Shinox