html - CSS如何高度步长箭头

Question

我目前希望为我的注册创建步骤....我从其他网站获得的代码...我将我的步骤高度设置为 50 像素...但是箭头仍以原始大小显示。

任何人都可以帮助我将步进箭头设置为相同的高度:50 像素？

在 HTML 中:

<div class="steps">
   <div class="now">Register</div>
   <div class="active"></div>
</div>

在 CSS 中:

/*******************************
            Step
*******************************/

.steps > * {
  display: inline-block;
  position: relative;
  padding: 1em 2em 1em 3em;

  vertical-align: top;
  background-color: #FFFFFF;
  color: #888888;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.steps > *:after {
  position: absolute;
  z-index: 2;
  content: '';
  top: 0em;
  right: -1.45em;

  border-bottom: 1.5em solid transparent;
  border-left: 1.5em solid #FFFFFF;
  border-top: 1.5em solid transparent;

  width: 0em;
  height: 0em;
}


/*******************************
            Group
*******************************/

.steps {


  /*font-size: 0em;*/
  letter-spacing: -0.31em;
  line-height: 1;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -moz-border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  border-radius: 0.3125rem;
}

.steps > * {
  letter-spacing: normal;
  width:150px;
  height:50px; // i set the height from here

}

.steps > *:first-child {
  padding-left: 1.35em;
  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
  border-radius: 0.3125em 0em 0em 0.3125em;
}
.steps > *:last-child {
  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
  border-radius: 0em 0.3125em 0.3125em 0em;
  margin-right: 0;
}
.steps > *:only-child {
  -webkit-border-radius: 0.3125em;
  -moz-border-radius: 0.3125em;
  border-radius: 0.3125em;
}

.steps > *:last-child:after {
  display: none;
}


/*******************************
             States
*******************************/

/* Hover */
.steps > *:hover,
.steps > *.hover {
  background-color: #F7F7F7;
  color: rgba(0, 0, 0, 0.8);
}
.steps > *.hover:after,
.steps > *:hover:after {
  border-left-color: #F7F7F7;
}

/* Hover */
.steps > *.down,
.steps > *:active {
  background-color: #F0F0F0;
}
.steps > *.down:after,
.steps > *:active:after {
  border-left-color: #F0F0F0;
}

/* Active */
.steps > *.active {
  cursor: auto;
  background-color: #555555;

   color: #CBCBCB;

}
.steps > *.active:after {
  border-left-color: #555555;
}

/* Now */
.steps > *.now {
  cursor: auto;
  background-color: #2AC7E1;
  color: #FFFFFF;

}
.steps > *.now:after {
  border-left-color: #2AC7E1;

}

/* Done */
.steps > *.done {
  cursor: auto;
  background-color: #46b98a;
  color: #FFFFFF;

}
.steps > *.done:after {
  border-left-color: #46b98a;
}

/* Disabled */
.steps > *.disabled {
  cursor: auto;
  background-color: #FFFFFF;
  color: #CBCBCB;
}
.steps > *.disabled:after {
  border: none;
  background-color: #FFFFFF;
  top: 0.42em;
  right: -1em;

  width: 2.15em;
  height: 2.15em;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);

  -webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
}


/*******************************
             Sizes
*******************************/

Answer 1

箭头高度已经是50px 不过你也可以试试，试试——

.steps > *:after {
    border-bottom: 25px solid transparent;
    border-left: 25px solid #ffffff;
    border-top: 25px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: -25px;
    top: 0;
    width: 0;
    z-index: 2;
}