javascript - CSS：创建流程步骤样式

Question

我是 CSS 新手。

我想在图像中创建一个流程步骤。

下面是我尝试过的代码。

.inline-div{
  padding: 1rem;
  border: 0.04rem gray solid;
  display: inline-block;
  width: 25%;
  border-top-left-radius: 25px;
}


.active{
  background: #8b7b38;
  color: #FFFFFF;
}

<div>
    <div class="inline-div">Text A</div>
    <div class="inline-div active">Text B</div>
    <div class="inline-div">Text C</div>
</div>

任何帮助都会很棒。

谢谢你。

标签： javascripthtmlcss

Answer 1

试试这个，

使用flex消除每个进程之间的差距

.main{ 
  flex-wrap:nowrap;
  display: flex;
}

并删除除第一项外的 inline-div 的所有左边框。

.inline-div:not(:first-child){
  margin-left:-0.04rem; // to remove the left border 
}

.inline-div{
  padding: 1rem;
  border: 0.04rem gray solid;
  width: 25%;
  border-top-left-radius: 25px;
}
.inline-div:not(:first-child){
  margin-left:-0.04rem; // to remove the left border 
}
.main{ 
  flex-wrap:nowrap;
  display: flex;
}

.active{
  background: #8b7b38;
  color: #FFFFFF;
}
.inline-div {}

<div class="main">
    <div class="inline-div">Text A</div>
    <div class="inline-div active">Text B</div>
    <div class="inline-div">Text C</div>
    <div class="inline-div">Text D</div>
</div>