如下图所示，求助用css实现这种效果，如何实现这种特殊的tab页和边框

参考 https://codepen.io/markcaron/...

tab页用js方便，边框样式可以用背景图

css实现tab页和边框

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /**
             * Trapezoid tabs
             */

            body {
                padding: 40px;
                font: 130%/2 Frutiger LT Std, sans-serif;
            }

            nav {
                position: relative;
                z-index: 1;
                padding-left: 1em;
            }

            nav>a {
                position: relative;
                display: inline-block;
                padding: .3em 1em 0;
                color: inherit;
                text-decoration: none;
                margin: 0 -.3em;
            }

            nav>a::before,
            main {
                border: .1em solid rgba(0, 0, 0, .4);
            }

            nav a::before {
                content: '';
                /* To generate the box */
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: -1;
                border-bottom: none;
                border-radius: .5em .5em 0 0;
                background: #ccc linear-gradient(hsla(0, 0%, 100%, .6), hsla(0, 0%, 100%, 0));
                box-shadow: 0 .15em white inset;
                transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
                transform-origin: bottom;
            }

            nav a.selected {
                z-index: 2;
            }

            nav a.selected::before {
                background-color: #eee;
                margin-bottom: -.08em;
            }

            main {
                display: block;
                margin-bottom: 1em;
                background: #eee;
                padding: 1em;
                border-radius: .15em;
            }
        </style>
    </head>
    <body>
        <nav>
            <a href="#">Home</a>
            <a href="#" class="selected">Projects</a>
            <a href="#">About</a>
        </nav>
        <main>
            Content area
        </main>

    </body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('a').click(function() {
                $('a').removeClass('selected')
                $(this).addClass('selected')
            })
        })
    </script>
</html>

css实现tab页和边框

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？