使用CSS Clip-Path实现自定义形状导航栏的技术求助

我想要实现如图所示的导航菜单布局，目标是把导航菜单定位在左下角，但始终没法复刻出精确的结构。目前用下面的HTML和CSS代码，得到的效果和目标有差距，恳请提供实现指导或代码帮助我达成目标。

目标效果 #

当前实现效果 #

原HTML代码 #

<nav class="navbar navbar-expand-lg box_nav navbar-light shadow-sm px-5 py-3 py-lg-0 custom-navbar">
    <a href="index.html" class="navbar-brand p-0">
        <h1 class="m-0 text-primary"><i class="fa fa-tooth me-2"></i>Hiv</h1>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav py-0">
            <a href="index.html" class="nav-item nav-link active">Welcome</a>
            <a href="whatsnew.html" class="nav-item nav-link">What's new</a>
            <a href="about.html" class="nav-item nav-link">About</a>
            <a href="gallery.html" class="nav-item nav-link">Gallery</a>
            <a href="resources.html" class="nav-item nav-link">Resources</a>
            <a href="contact.html" class="nav-item nav-link">Contact</a>
        </div>
     </div>
</nav>

原CSS代码 #

.box_nav {
    width: 60%;
    background-color: #ffffff;
    clip-path: polygon(90% 0%, 100% 60%, -80% 90px, 0% 20%, 0 0%);
    height: auto;
    position: relative; /* Ensure positioning context */
    z-index: 2; /* Ensure it's on top of box_main */
}

解决方案 #

核心调整点 #

1. 固定定位到左下角：替换相对定位为固定定位，直接锚定页面左下角
2. 修正clip-path形状：调整多边形路径参数，匹配目标图的斜切轮廓
3. 适配导航内容显示：调整内边距和导航项排列，避免内容被裁剪

调整后的CSS代码 #

.box_nav {
    width: 60%;
    background-color: #ffffff;
    /* 调整为贴合目标的斜切形状 */
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0 80%);
    height: auto;
    /* 固定到页面左下角 */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    /* 自定义内边距，避免内容被裁剪 */
    padding-left: 2rem !important;
    padding-right: 0 !important;
}

/* 确保导航项横向均匀排列 */
.navbar-nav {
    gap: 1.5rem;
    align-items: center;
}

/* 移动端适配：恢复正常布局，避免固定定位遮挡内容 */
@media (max-width: 991px) {
    .box_nav {
        position: relative;
        width: 100%;
        clip-path: none;
        padding: 1rem !important;
    }
}

效果说明 #

• position: fixed配合bottom: 0和left: 0实现导航在左下角的固定定位，不会随页面滚动移动
• 调整后的clip-path参数实现了右上角和右下角的斜切效果，完全匹配目标图轮廓
• 自定义内边距和导航项间距，确保菜单内容完整显示且布局整齐
• 移动端自动切换为正常流式布局，不影响小屏浏览体验

内容的提问来源于stack exchange，提问作者P.LOVEMAKER