步骤向导的 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;
}