WordPress消息框底部SVG曲线适配问题求助

问题原因 #

你当前用固定像素值bottom: -25px定位SVG，页面缩放时，SVG高度会随宽度等比例变化，固定像素偏移量无法匹配变化后的SVG高度，最终导致二者间出现空隙。

解决方案一：自适应SVG定位（保留SVG方案） #

让SVG自适应容器宽度，同时使用相对自身高度的定位逻辑，确保缩放时始终贴合Box底部：

修改CSS如下：

.box_main {
    width: 80%;
    margin: 3rem auto 5rem;
    background: #eee;
    position: relative;
    /* 可选：增加底部内边距，避免内容被定位逻辑影响 */
    padding-bottom: 1rem;
}

.box_main h2 {
    text-align: center;
    font-size: 50px;
    padding: 25px 0 0;
}

.box_main p {
    font-size: 20px;
    padding: 0 20px 10px;
}

.box_main svg {
    position: absolute;
    bottom: 0;
    left: 0;
    /* 让SVG宽度与容器完全一致 */
    width: 100%;
    height: auto;
    fill: #eee;
    /* 将SVG向下移动自身高度的100%，刚好贴合Box底部 */
    transform: translateY(100%);
}

HTML部分保持原有结构即可。

原理说明 #

• width: 100%确保SVG宽度始终与Box同步变化
• transform: translateY(100%)基于SVG自身高度计算偏移量，无论页面如何缩放，都能精准贴合Box底部，避免固定像素值的适配缺陷

解决方案二：用CSS Clip-path替代SVG（更简洁） #

如果不需要自定义复杂弧形，直接用CSSclip-path实现底部弧形，无需额外SVG文件，完全不存在缩放适配问题：

.box_main {
    width: 80%;
    margin: 3rem auto 5rem;
    background: #eee;
    /* 自定义弧形路径，可调整数值改变弧度大小 */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), 50% 100%, 0 calc(100% - 25px));
    /* 增加底部内边距，避免内容被裁切 */
    padding-bottom: 2rem;
}

.box_main h2 {
    text-align: center;
    font-size: 50px;
    padding: 25px 0 0;
}

.box_main p {
    font-size: 20px;
    padding: 0 20px 10px;
}

此时可直接移除HTML中的SVG标签，仅通过CSS即可实现弧形底部效果。

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