我怎样才能制作这个形状的按钮组？

Question

我正在努力制作一个在活动路径上改变背景的组按钮，它可能看起来像这样

我尝试了一种方法，但遇到了一些边界实现错误，该主体是否有更好的方法来制作这些按钮组？ https://codesandbox.io/s/quizzical-bohr-uczl0?file=/src/App.js

Answer 1

使用 flex 是行不通的。我的想法是在彼此上有一个前箭头和一个后箭头。底部箭头向右1px：

.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 class="menu">
    <div class="item">Fabric</div>
    <div class="item active">Style</div>
    <div class="item">Contrast</div>
</div>