目前做的一個(gè)微信內(nèi)的web系統(tǒng)有一個(gè)頁(yè)面需要用到肌毅，查了些資料實(shí)現(xiàn)了署尤，分享一下村缸。
效果如下：
燕尾型箭頭.png
這個(gè)地方呢其實(shí)主要用到了css里before和after選擇器氯夷，具體代碼：
div.step-container {
display: flex;
overflow: hidden;
align-items: center;
}
div.step-container div.step,
div.step-container div.step2 {
background-color: #69C795;
position: relative;
display: inline-block;
flex-basis: 50px;
height: 20px;
}
div.step-container div.step:after,
div.step-container div.step2:after {
content: '';
position: absolute;
right: -10px;
background: #69C795;
width: 20px;
height: 20px;
transform: rotate(-45deg);
z-index: 1;
box-shadow: 3px 3px 0px 0px white;
}
div.step-container div.step2 {
background-color: #ccc;
}
div.step-container div.step2:after {
background: #ccc;
}
div.step-container div.step1:before {
content: '';
position: absolute;
left: -10px;
background: white;
width: 20px;
height: 20px;
transform: rotate(-45deg);
z-index: 1;
box-shadow: 3px 3px 0px 0px white;
}
html里面布局時(shí)如下即可：
<div class="step-container" style="margin-top: 25px;">
<div class="step step1"></div>
<div class="step2"></div>
<div class="step2"></div>
<div class="step2"></div>
<div class="step2"></div>
<div class="step2"></div>
</div>