使用 CSS Clip-Path 创建自定义形状的导航框

Question

我正在尝试实现图中所示的导航菜单布局，这里，但我无法复制确切的结构。我希望导航菜单位于左下角。您能否提供一些指导或代码来帮助我实现这一目标？

我得到这个图像

来自

<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 */
    }

Answer 1

您的预剪裁元素应该是一个矩形，剪裁后的元素完全适合其中，例如如果你想要一个三角形，它的元素应该是三角形适合其中的东西。

顺便说一句，如果您在制作

clip-path

时遇到困难，请查看这里。