CSS 效果：实现动态展示双箭头
最近写了一段 CSS 样式，虽然不难，但实现过程比较繁琐。这个效果结合了两个箭头，一个突出，一个内缩，非常适合用于步骤导航或选项卡切换等场景。样式不仅仅是静态的，还可以通过点击 click 或者 hover 事件，让它产生动态效果，提升用户体验。大家可以根据自己的需求做进一步完善和改变，比如调整箭头颜色、大小或者点击切换添加不同的动画效果等。
感兴趣的小伙伴可以试试看！
实现的效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.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>
</head>
<body>
<div class="container">
<div class="common selected">1. vue2 内容</div>
<div class="common noSelected">2. vue3 内容</div>
</div>
</body>
</html>该部分代码仅实现了基础的 CSS 样式，没有涉及到动态交互。大家在尝试时，可以结合 Vue 或其他框架，实现动态的状态切换效果。
原文地址：https://blog.csdn.net/weixin_52648900/article/details/142650910
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！