clip-path 加边框border

最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考

下图是设计图

如下是实现方案(就是写两层,外面一层灰色,里面一层白色覆盖)

复制代码
<template>
    <section class="moveCompanyLimits">
      <div class="tabBar">
          <div class="tabBar_border" :style="isFocus ? 'background: #fff;' : 'background: #d7d7d7;'">
            <div :style="isFocus ? 'background: #d7d7d7;' : 'background: #fff;'" class="admin_old" @click="changeAdmin(true)">111</div>
            <div class="admin_new" @click="changeAdmin(false)">222</div>
          </div>
      </div>
      <div>

      </div>
    </section>
</template>
<script>
export default {
    data () {
        return {
            isFocus:false
        }
    },
    methods:{
        changeAdmin(boolean){
            this.isFocus = boolean
        }
    }
}
</script>
<style lang="less" scoped>
.moveCompanyLimits{
    .tabBar{
        margin: 20px auto;
        font-size: 14px;
        text-align: center;
        line-height: 45px;
        width: 100%;
        height: 46px;
        background: #d7d7d7;
        clip-path: polygon(0% 0%, 96% 0px, 100% 50.00%, 96% 100%, 0px 100%);
        border: 1px solid #d7d7d7;
        .tabBar_border{
            display: flex;
            align-items: center;
            width: 100%;
            height: 44px;
            background: #d7d7d7;
            clip-path: polygon(0% 0%, 96% 0px, 100% 50.00%, 96% 100%, 0px 100%);
        }
        .tabBar_border div{
            width: 50%;
            cursor: pointer;
        }
        .admin_old{
            height: 44px;
            background: #fff;
            clip-path: polygon(0% 0%, 92% 0px, 100% 50.00%, 92% 100%, 0px 100%);
        }
        .admin_old:focus{
            background: red;
        }
    }
}
</style>
复制代码

 

posted @   吼吼酱  阅读(4821)  评论(0编辑  收藏  举报
编辑推荐:
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
阅读排行:
· 几个自学项目的通病,别因为它们浪费了时间!
· 在外漂泊的这几年总结和感悟,展望未来
· 如何在 ASP.NET Core 中实现速率限制?
· 博客园 & 1Panel 联合终身会员上线
· Kubernetes 知识梳理及集群搭建
点击右上角即可分享
微信分享提示