用於步驟嚮導的CSS

Question

我是CSS新手，需要幫助來開發如下所示的步驟嚮導。請向我提供相同的指示。

這裏是我試過的代碼示例：我在調整箭頭標誌那種面對問題https://jsfiddle.net/61peq3d6/1/

.wizard li { 
 
    background-color: #fff; 
 
    border: solid black 3px; 
 
    border-radius: 5px; 
 
    display: inline; 
 
    padding: 10px 30px 10px 40px; 
 
    margin-right: -7px; 
 
    width: auto; 
 
    color: teal; 
 
} 
 

 
.wizard li::before, 
 
.wizard li::after { 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    border-color: transparent; 
 
    border-left-color: #000; 
 
    border-radius: 10px; 
 
} 
 

 
.wizard li::before { 
 
    border-width: 25px; 
 
    margin-top: -16px; 
 
    margin-left: 84px; 
 
} 
 

 
.wizard li::after { 
 
    border-left-color: #fff; 
 
    border-width: 21px; 
 
    margin-top: -12px; 
 
    margin-left: 24px; 
 
} 
 

 
.wizard li.selected { 
 
    background-color: black; 
 
    color: #fff; 
 
} 
 

 
.wizard li.selected::after { 
 
    border-left-color: black; 
 
} 
 

 
.wizard li:last-child::after { 
 
    border-left-color: transparent; 
 
}

<ul class="wizard"> 
 
    <li>Passo 1</li> 
 
    <li class="selected">Passo 2</li> 
 
    <li>Passo 3</li> 
 
    <li>Passo 4</li> 
 
    <li>Fim</li> 
 
</ul>

。

Answer 1

得到了答案：DEMO

HTML代碼：

<div class="form-wizard centered-pills"> 
      <ul class="nav nav-pills"> 
       <li role="presentation" class="completed"><a href="#">1. Contact Information</a></li> 
       <li role="presentation" class="current"><a href="#">2. Product Information</a></li> 
       <li role="presentation" ><a href="#">3. Confirmation</a></li> 
      </ul> 
     </div> 

CSS：

.form-wizard { 
    margin: 0 auto; 
    display: block; 
    margin-bottom: 25px; 
} 
.form-wizard .nav li { 
    box-shadow: 0 5px 3px -3px #ddd; 
} 
.form-wizard .nav li + li { 
    margin-left: 0; 
} 
.form-wizard .nav li:first-child a { 
    padding-left: 10px; 
} 
.form-wizard .nav li:last-child a { 
    border-right: 1px solid #000; 
} 
.form-wizard .nav li:last-child:after, .form-wizard .nav li:last-child:before { 
    border-width: 0; 
} 
.form-wizard .nav li:last-child:hover:after, .form-wizard .nav li:last-child:hover:before { 
    border-width: 0; 
} 
.form-wizard .nav li:last-child:hover a { 
    border-right: 1px solid #000; 
} 
.form-wizard .nav li a { 
    border-radius: 0; 
    padding-left: 30px; 
    background: #fff; 
    border: 1px solid #000; 
    color: teal; 
    border-right: 0; 
} 
.form-wizard .nav li a:hover, .form-wizard .nav li a:active, .form-wizard .nav li a:focus { 
    background: teal; 
    color: white; 
} 
.form-wizard .nav li:after, .form-wizard .nav li:before { 
    content: ""; 
    border-color: transparent transparent transparent #000; 
    border-style: solid; 
    border-width: 20px; 
    position: absolute; 
    display: block; 
    top: 0; 
    z-index: 1; 
} 
.form-wizard .nav li:after { 
    border-left-color: #fff; 
    top: 1px; 
    right: -39px; 
} 
.form-wizard .nav li:before { 
    border-width: 21px; 
    right: -41px; 
} 
.form-wizard .nav li.completed a { 
    border-radius: 0; 
    padding-left: 30px; 
    background: #fff; 
    border: 1px solid #000; 
    border-right: 0; 
    color: teal; 
    cursor: pointer; 
} 
.form-wizard .nav li.completed:after, .form-wizard .nav li.completed:before { 
    content: ""; 
    border-color: transparent transparent transparent #000; 
    border-style: solid; 
    border-width: 20px; 
    position: absolute; 
    display: block; 
    top: 0; 
    right: -40px; 
    z-index: 1; 
} 
.form-wizard .nav li.completed:after { 
    border-left-color: #fff; 
    top: 1px; 
    right: -39px; 
} 
.form-wizard .nav li.completed:before { 
    border-width: 21px; 
    right: -41px; 
} 
.form-wizard .nav li.current a { 
    border-radius: 0; 
    padding-left: 30px; 
    background: #000; 
    border: 1px solid #000; 
    border-right: 0; 
    color: white; 
    cursor: pointer; 
} 
.form-wizard .nav li.current:after, .form-wizard .nav li.current:before { 
    content: ""; 
    border-color: transparent transparent transparent #000; 
    border-style: solid; 
    border-width: 20px; 
    position: absolute; 
    display: block; 
    top: 0; 
    right: -40px; 
    z-index: 1; 
} 
.form-wizard .nav li.current:after { 
    border-left-color: #000; 
    top: 1px; 
    right: -39px; 
} 
.form-wizard .nav li.current:before { 
    border-width: 21px; 
    right: -41px; 
} 
.form-wizard .nav li.current:last-child a { 
    border-right: 1px solid #000; 
} 
.form-wizard .nav li.current:last-child:after, .form-wizard .nav li.current:last-child:before { 
    border-width: 0; 
} 
.form-wizard .nav li.current:last-child:hover:after, .form-wizard .nav li.current:last-child:hover:before { 
    border-width: 0; 
} 
.form-wizard .nav li.current:last-child:hover a { 
    border-right: 1px solid #000; 
}