有企业邮箱案例的网站,网站负责人拍照,网站建设策划包括哪些内容,编程软件下载手机版最近写了一段 CSS 样式#xff0c;虽然不难#xff0c;但实现过程比较繁琐。这个效果结合了两个箭头#xff0c;一个突出#xff0c;一个内缩#xff0c;非常适合用于步骤导航或选项卡切换等场景。样式不仅仅是静态的#xff0c;还可以通过点击 click 或者 hover 事件虽然不难但实现过程比较繁琐。这个效果结合了两个箭头一个突出一个内缩非常适合用于步骤导航或选项卡切换等场景。样式不仅仅是静态的还可以通过点击 click 或者 hover 事件让它产生动态效果提升用户体验。大家可以根据自己的需求做进一步完善和改变比如调整箭头颜色、大小或者点击切换添加不同的动画效果等。
感兴趣的小伙伴可以试试看
实现的效果如下 代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.container {display: flex;width: 100%;height: 40px;flex-wrap: nowrap;padding: 0 8px 8px;background-color: #fff;border-radius: 2px;font-size: 14px;}.common {position: relative;width: 181px;height: 32px;flex: 1;line-height: 32px;text-align: center;box-sizing: border-box;}.selected {background-color: #ff7f95;color: #fff;margin-right: 4px;font-weight: 500;}.selected::before {position: absolute;z-index: 1;top: 50%;right: -4px;border-top: 18px solid transparent;border-right: 5px solid #ff7f95;margin-top: 0;content: ;transform: rotate(-180deg);}.selected::after {position: absolute;z-index: 1;top: 50%;right: -4px;border-top: 18px solid transparent;border-left: 5px solid #ff7f95;margin-top: -17px;content: ;}.noSelected {background-color: #dbdbdb;color: #5a6066;margin-left: 4px;font-size: 400;}.noSelected::before {position: absolute;z-index: 1;top: 50%;left: 0;border-top: 18px solid transparent;border-right: 5px solid #fff;margin-top: 0;content: ;transform: rotate(-180deg);}.noSelected::after {position: absolute;z-index: 1;top: 50%;left: 0;border-top: 18px solid transparent;border-left: 5px solid #fff;margin-top: -17px;content: ;}/style/headbodydiv classcontainerdiv classcommon selected1. vue2 内容/divdiv classcommon noSelected2. vue3 内容/div/div/body
/html
该部分代码仅实现了基础的 CSS 样式没有涉及到动态交互。大家在尝试时可以结合 Vue 或其他框架实现动态的状态切换效果。
