[CSS] CSS实现移动的三角边框箭头

CSS实现移动的三角边框 箭头

设计稿长这样，交互是点击旁边的 Tab，三角边框移动到对应的位置，讲一下大概的实现，这里的三角边框我用的是两个三角形拼接而成的，直线是Tab-item 的 border-right

1、先把直线弄好

.tab-item {position: relative;display: flex;align-content: start;align-items: center;cursor: pointer;border-right: 1px solid #BEAD7D; // 直线padding-bottom: 58px;width: 120px;
}

2、再把三角边框弄出来，用定位放在对应的位置

triangle-box {position: absolute;top: 15px;right: -15px;
}.triangle{width: 0;height: 0;border-style: solid;border-width: 14px 0 14px 14px;position:relative;border-color: transparent transparent transparent #BEAD7D;&::before{content: '';border-style: solid;border-width: 16px 0 16px 16px;border-color: transparent transparent transparent #2e2c2a;position: absolute;right: 1px;top: -16px; }
}

3、用 cuurentTab === index 判断三角边框是否显示

<divclassName={styles.triangleBox}style={currentTab === index ? {display: 'block'} : {display: 'none'}}
><div className={styles.triangle}></div>
</div>

更多三角边框可以参考这个网站 https://qishaoxuan.github.io/css_tricks/triangle/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！