CSS:
.grup{
padding-top: 104px;
position: relative;
border-radius: 15px;
margin-bottom: 217px;
}
.grup .img{
width: 370px;
height: 87px;
position: absolute;
top:-48px;
margin-left: calc(50% - 185px);
z-index:999;
background: linear-gradient(
115deg, /*背景分割倾斜角度*/
#fff 0%,
#fff 40%,
#3596EB 40%,
#3596EB 100%
);
border: 4px solid #3596EB;
border-radius: 44px;
}
.grup .img .coun{
display: flex;
justify-content: space-around;
}
.grup .img .coun div{
display: flex;
line-height: 88px;
}
.grup .img .coun .left{
color:#3596EB;
font-size: 32px;
letter-spacing: 3px;
font-weight: 500;
}
.grup .img .coun .right{
color:#fff;
font-size: 28px;
letter-spacing: 3px;
font-weight: 500;
}
HTML:
效果: