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

Posted 2023-03-15

【中文标题】我怎样才能制作这个形状的按钮组？

【英文标题】：How can I'm able to make this shaped button group?

【发布时间】：2022-01-17 03:36:35

【问题描述】：

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

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

【参考方案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>

【讨论】：

如果只有 2 选项卡处于活动状态？

这可能吗？这是一个面包屑菜单，对吧？

是的，有可能

我已经更新了我的代码。请检查。

非常感谢您节省了我的时间...