用css实现不规则背景填充

html部分

    
        
        
        
        
        
    

    
        

            
1.填写姓名
            
2.填写电话
            
3.填写邮箱
            
4.提交订单
        
    

css 部分

@media (max-width: 359px) {
    html {
        font-size: 90px;
    }
}

html {
    font-size: 100px;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    -webkit-text-size-adjust: none;//修改谷歌字体不缩放
    font-size: 0.16rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//设置或检索对象的轻按时高亮 黑色
    /* -webkit-user-select: none; */
}

.progress {
    position: relative;
    height: .44rem;
    overflow: hidden;
}

.border_b::after {
    content: " ";
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #dcdcdc;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    position: absolute;
    left: 0;
    bottom: 0;
}

.pro_step1 {
    left: 0;
    padding: 0;
}

[class^="pro_step"] {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 22%;
    height: .44rem;
    padding-left: .15rem;
    font-size: .14rem;
    color: #949494;
    line-height: .44rem;
    text-align: center;
    background-color: #fff;
}

[class^="pro_step"]::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -0.25rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #dcdcdc;
    border-width: 0.23rem 0.13rem;
    z-index: 1;
}

[class^="pro_step"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: -0.23rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent white;
    border-width: 0.22rem 0.12rem;
    z-index: 2;
}

.pro_step1 {
    left: 0;
    padding: 0;
}

.pro_step2 {
    left: 22%;
    width: 24%;
}

[class^="pro_step"].pressed {
    color: #fff;
    background-color: #379479;
}

.pro_step3 {
    left: 46%;
    width: 24%;
}

.pro_step4 {
    width: 35%;
    text-align: right;
    right: 0;
    padding-right: .1rem;
    z-index: -1;
}
[class^="pro_step"].pressed::after {
    border-color: transparent transparent transparent #379479;
}

最终实现效果图