clip-path 加边框border

2019-12-06 18:02:30 阅读：876 来源： 互联网

最近些项目，需求是写一个箭头图案，想着就用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>

标签：clip,100%,0%,path,0px,border
来源： https://www.cnblogs.com/yhhBKY/p/11996791.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

clip-path 加边框border