[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 判断三角边框是否显示

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

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