I'm struggling to make a group button which background get changed on the active path, it may look something like this

I tried an approach but faced some border implementation errors in it, is that body have some better approach to make these button groups? https://codesandbox.io/s/quizzical-bohr-uczl0?file=/src/App.js

CodePudding user response：

With flex it's not going to work out. My idea is to have a before arrow and an after arrow on each other. The bottom arrow is 1px to the right:

.menu {
  background: #efefef;
}
.item {
  width: 140px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #000;
  background: #efefef;
  position: relative;
  display: inline-block;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
}
.item.active{
    background-color: #0172B6;
    color: #fff;
}

.item:before{
    content: '';
    position: absolute;
    right: -25px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid #efefef;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    z-index: 1  
}


.item.active:before{
    content: '';
    position: absolute;
    right: -25px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid #0172B6;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;  
    z-index: 2
}
.item.active:after{
    content: '';
    position: absolute;
    right: -26px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid #efefef;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    z-index: 1  
}
.menu .item:last-of-type:before,
.menu .item.active:last-of-type:before,
.menu .item.active:last-of-type:after{
    display: none   
}

<div >
    <div >Fabric</div>
    <div >Style</div>
    <div >Contrast</div>
</div>