CSS如何高度步驟箭頭

Question

我目前希望爲我的註冊創建步驟....以及我從其他網站獲得的此代碼...我在50px的高度步驟...但是，箭頭仍然以原始大小顯示。

任何人都可以幫助我將步驟箭頭設置爲相同的高度：50px？

在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; 
}