之前一个朋友讨论如何做一个pk状态条，目前据我所知有三种方法
# 一、 css中裁切和伪类
clip-path 和 ::after ::before 
.box{
overflow: hidden;
position: relative;
width: 300px;
height: 30px;
border-radius: 50px;
margin:100px auto;
display: flex;
}
.box div{
transform: translateY(-50%);
box-sizing: border-box;
height: 100%;
position: relative;
top: 50%;
}
.box div:nth-child(1){
-webkit-clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
border-radius: 50px 0 0 50px;
width: 150px;
border: 4px solid rgb(241, 162, 241);
background:linear-gradient(to right, rgb(235, 152, 236), rgb(139, 0, 141));
}
.box div:nth-child(1)::after{
content: '';
position: absolute;
right: 26px;
transform:rotate(45deg) translateY(-50%);
width: 5px;
height: 50px;
background: rgb(241, 162, 241);
}
.box div:nth-child(2){
/* position: absolute; */
width: 150px;
right: 9%;
border-radius: 0 50px 50px 0;
border: 4px solid rgb(16, 39, 172);
background:linear-gradient(to right,rgb(170, 214, 241), rgb(16, 144, 223)) ;
-webkit-clip-path: polygon(19.5% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(19.5% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.box div:nth-child(2)::before{
content: '';
position: absolute;
left: -3px;
transform:rotate(44deg) translateY(-50%);
width: 5px;
height: 50px;
background: rgb(16, 39, 172);
}
<div class="box">
<div></div>
<div></div>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# 二、 svg
# 此方法代码行数就少了许多
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 500px; width: 500px;">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<path d="M 100 100 q -17 13 0 26 h 50 l 20 -26 h -70" stroke="blue"
stroke-width="3" fill="url(#grad1)" />
<path d="M 240 100 q 17 13 0 26 h -80 l 20 -26 h 61" stroke="blue"
stroke-width="3" fill="url(#grad2)" />
</svg>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 三、 在第一种的方法上换成图片
# 四、 svg路径的命令
# M = moveto
M x y 移动到指定坐标，xy分别为x轴和y轴的坐标点，类似画笔的起点。
path中的起点，必须存在（文档中虽然没有提到过，但是path的其他命令都需要依赖一个初始位置，而实际操作过程中也没有需要到可以不使用M的情况，后面发现有例外我再过来补充。
# L = lineto
L x y 在初始位置（M 画的起点）和xy确定的坐标画一条线。 两点一线，直线，绘图中很常见的方式。
H = horizontal lineto
H x 沿着x轴移动一段位置
V = vertical lineto
V y 沿着y轴移动一段位置
# C = curveto
C x1 y1 x2 y2 x y 三次贝塞尔曲线 当前点为起点，xy为终点，起点和x1y1控制曲线起始的斜率，终点和x2y2控制结束的斜率。
# S = smooth curveto
S x2 y2 x y 简化的贝塞尔曲线 1.如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。
2.如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。
# Q = quadratic Bézier curve
Q x1 y1 x y 二次贝塞尔曲线Q 只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
# T = smooth quadratic Bézier curveto
Q命令的简写命令。
与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。
1.T命令前面必须是一个Q命令，或者是另一个T命令
2.如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线
# A = elliptical Arc
A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y rx 弧的半长轴长度 ry 弧的半短轴长度 x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针旋转角度。 large-arc-flag 为1表示大角度弧线，0表示小角度弧线 sweep-flag 为1表示从起点到终点弧线绕中心顺时针方向，0表示逆时针方向。 xy 是终点坐标。
# Z = closepath
从当前位置到起点画一条直线闭合。