html 背景填充,用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;

}

最终实现效果图