完成后的效果
- 首先是畫(huà)一個(gè)矩形, 再通過(guò) 偽 after 和 before 給兩邊畫(huà)上三角形拼接上就 好啦, 話(huà)不多說(shuō), 直接貼代碼!
<template>
<div class="family-info-edit-reconsitution">
<div class="household-details-form">
<ul class="form-progress-ul">
<template v-for="item in 8">
<li :key="item" :class="['form-progress-li', activeForm == item ? 'form-progress-li-active' : '']" @click="handelCurrentForm(item)">
<span>步驟{{item}}</span>
</li>
</template>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeForm: ''
};
},
methods: {
handelCurrentForm(val) {
this.activeForm = val;
}
}
};
</script>
<style lang="less" scoped>
.family-info-edit-reconsitution{
min-width: 1100px;
.household-details-form{
.form-progress-ul{
.form-progress-li{
cursor: pointer;
width: 120px;
line-height: 50px;
background: #b5b5b5;
display: inline-block;
color:#fff;
position: relative;
margin-right: 10px;
text-align: center;
border-radius: 2px;
}
.form-progress-li:after{
content: '';
display: block;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid #b5b5b5;
position: absolute;
right: -19px;
top: 0;
Z-index: 10;
}
.form-progress-li:before{
content: '';
display: block;
border-top: 25px solid #b5b5b5;
border-bottom: 25px solid #b5b5b5;
border-left: 20px solid #ffffff;
position: absolute;
left: 0px;
top: 0;
}
// 隱藏第一個(gè)元素的 before 樣式
.form-progress-li:first-child:before{
display: none;
}
.form-progress-li{
span{
margin-left: 20px;
}
}
.form-progress-li:first-child{
span{
margin-left: 0;
}
}
// 選中顏色
.form-progress-li-active{
background-color: #29d095;
}
.form-progress-li-active:after{
border-left-color: #29d095;
}
.form-progress-li-active:before{
border-left-color: #ffffff;
border-top: 25px solid #29d095;
border-bottom: 25px solid #29d095;
}
}
}
}
</style>
