问题：
javascript - 有没有大佬知道这样的分段器效果如何实现？
齐献
有没有大神知道这样的分段器效果如何实现？
有没有大神知道这样的分段器效果如何实现？
点击左侧按钮时右侧边框变为45度曲线，点击右侧反之，这个咋整？
共有3个答案
蒙麒
找UI要2张背景图。
伯茂才
可以找UI切两张图片，点击的时候切换显示/隐藏
吕永寿
可以参考下这个 https://jsrun.net/JHFKp
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>梯形tab按钮-基于clip-path path函数实现</title> <style> .wrap { background-color: #eee; width: 375px; margin: 0 auto; padding: 10px; } .tabs { display: flex; width: 100%; overflow: hidden; border-radius: 8px 8px 0 0; background: linear-gradient(#cdd9fe, #e2e9fd); } .tab { flex: 0 0 50.1%; height: 50px; cursor: pointer; position: relative; text-align: center; line-height: 50px; } .tab.active { background-color: #fff; color: #4185ef; } .tab.active:before { content: ''; position: absolute; top: 0; left: -50px; height: 100%; width: 50px; z-index: 2; background-color: #fff; clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); } .tab.active:after { content: ''; position: absolute; top: 0; right: -50px; height: 100%; width: 50px; z-index: 2; background-color: #fff; clip-path: path('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z'); } .content-wrap { min-height: 200px; background-color: #fff; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script> <script src="https://unpkg.com/@unocss/runtime"></script> <script> // pass unocss options window.__unocss = { rules: [ // custom rules... ], presets: [ // custom presets... ], // ... } </script></head><body> <div class="wrap" x-data="initData()"> <div class="tabs"> <template x-for="index in 2" :key="index"> <div @click="onTabClick(index)" class="tab" :class="{ 'active': activeIndex == index }" x-text="'标签' + index"> </div> </template> </div> <div class="content-wrap"> </div> </div> <script> function initData() { return { activeIndex: 1, onTabClick(index) { this.activeIndex = index } } } </script></body></html>
类似资料：
-
三角形上面的图片也需要根据百分比，去渐变，动态变化 貌似Ui设计渐变的左右搞反了
-
问题内容： 我试图让我的应用程序使用保存布尔值来更改屏幕的方向时保存一些数据。 我已经设置了许多断点，并且在变量视图中得到了布尔值的错误 我不知道为什么要在启动活动时用false值声明它，如果按下按钮将其更改为true。谁能帮我吗？ 问题答案： 检查您的Android Studio中的构建变体是否具有 可调试 为真 proguard 被禁用或已被注释掉。
-
这种效果怎么通过css实现？ 这个圆环扩散的效果我做出来了，但是没有达到这种视频中效果
-
这样写页面选中没有生效
-
如何将两个方法合并成一个方法 如图parentValues = ['BC', 'BC-SRV', 'BC-SRV-COM'], 想得到的是选中的树组arrSelectedFacets = ['BC-SRV-COM-FTP', 'BC-SRV-COM-TEL'] 如果 BC-SRV-COM 下的子节点都选中，则arrSelectedFacets=['BC-SRV-COM']
-
这种地图效果是叫什么？具体该使用哪种技术实现，如何实现，有具体的示例吗？