html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,target-densitydpi=medium-dpi,initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="progress border_b">
<div class="pro_step1 ">1.填寫姓名</div>
<div class="pro_step2">2.填寫電話</div>
<div class="pro_step3 pressed ">3.填寫郵箱</div>
<div class="pro_step4">4.提交訂單</div>
</div>
</body>
</html>
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;
}
最終實現效果圖
