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