实现代码

<style>
    .cus-tab-warp {}

    .cus-tab-content {
        position: relative;
        display: inline-block;
    }

    .cus-tab {
        width: 150px;
        height: 50px;
        background: orange;
        border-radius: 10px 10px 0 0;
        position: relative;
        transform-origin: center bottom;
        transform: perspective(40px) rotateX(30deg);
        cursor: pointer;
        transition: 0.5s;
    }

    .cus-tab::before,
    .cus-tab::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: #000;
        bottom: 0;
    }

    .cus-tab::before {
        left: -10px;
        background: radial-gradient(circle at 0 0, transparent 10px, orange 10px);
        transition: 0.5s;
    }

    .cus-tab::after {
        right: -10px;
        background: radial-gradient(circle at 10px 0, transparent 10px, orange 10px);
        transition: 0.5s;
    }

    .cus-tab-content>span {
        position: absolute;
        top: 25px;
        left: 56px;
        color: #fff;
        cursor: pointer;
    }

    .cus-tab-content:hover .cus-tab {
        background: red;
    }

    .cus-tab-content:hover .cus-tab::before {
        background: radial-gradient(circle at 0 0, transparent 10px, red 10px);
    }

    .cus-tab-content:hover .cus-tab::after {
        background: radial-gradient(circle at 10px 0, transparent 10px, red 10px);
    }
</style>
<div class="cus-tab-warp">
    <div class="cus-tab-content">
        <div class="cus-tab"></div>
        <span>首页</span>
    </div>
    <div class="cus-tab-content">
        <div class="cus-tab"></div>
        <span>分类</span>
    </div>
</div>

效果展示

首页
分类
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 实现代码
  2. 2. 效果展示