如何在HTML/CSS/JavaScript中使狀態欄看起來像某些在線訂購的狀態欄？ -有解無憂

我有一個看起來像這樣的狀態欄

。

我現在使用的這段代碼如下。我的問題是：使用一個不可點擊的格式化單選按鈕（我見過類似的外觀），還是使用一個完全不同的方法更容易做到這一點呢？我想我可以想出如何根據當前的狀態改變顏色，但我不知道如何進行基本的形狀繪制。

。

span class="hljs-selector-class">.container {
  width: 800px;
  margin: 100px auto;
}

.progressbar {
  counter-reset: step;
}

.progressbar li {
  list-style-type: none;
  width: 16.6666%。
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: 大寫。
  color: #7d7d7d;
}

.progressbar li: before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step。
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li: after {
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li：first-child:after {
  內容：無。
}

.progressbar li.active {
  color: 綠色。
}

.progressbar li.active: before {
  border-color: #55b776;
}

.progressbar li.active   li: after {
  background-color: #55b776;
}

<div class="container"> /span>
  <ul class="progressbar"> 
    <li class="active"> NOI Recieved</li>
    <li class="active"/span>> Request To Recieved</li>
    <li class="active"/span>> Recieved to Compelte</li>>
    <li>Complete To Source</li>
    <li>公眾評論</li>/span>
    <li>分公司經理問題</li>/span>
  </ul>/span>
</div>/span>

uj5u.com熱心網友回復：

你可以使用一個具有邊框半徑和隱藏溢位的容器來完成基本的形狀，并使用傾斜的偽元素作為分段。

。

span class="hljs-selector-tag">ul {
  list-style: none;
  display: inline-flex;
  border: 1px solid black;
  border-radius: 600px;
  overflow: hidden;
}

li {
  padding: 1em 2em;
  position: relative;
}

li:before {
  content: ''/span>;
  position: absolute;
  嵌入。0;
  border-right: 1px solid black;
  transform: skew（-30deg）。
  background: bisque;
  z-index: -1; /* 在文本后面 */.
}

li：first-child {
  /* 將第一項向左延伸，以填補剩余的空間 */
  margin-left: -4rem。
  padding-left: 4rem;
}

li:last-child {
  /* 將最后一項向右延伸，以填補剩余的空間 */
  margin-right: -2rem。
  padding-right: 4rem;
}

.active: :before {
  background: skyblue;
}

<ul>/span>
  <li>一個</li>
  <li>兩個</li>
  <li class="active"> 三</li>/span>
  <li>/span>四</li>/span>
  <li>五</li>/span>
</ul>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/331823.html

標籤：

上一篇：懸停時按鈕的底部邊界消失了

下一篇：在我試圖使用javascript列印的頁面中，Css樣式沒有被應用。