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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· 几个自学项目的通病,别因为它们浪费了时间!
· 在外漂泊的这几年总结和感悟,展望未来
· 如何在 ASP.NET Core 中实现速率限制?
· 博客园 & 1Panel 联合终身会员上线
· Kubernetes 知识梳理及集群搭建