1,做卡片的分割线
.card2{
border-bottom: 1rpx dashed red;
width: 620rpx;
margin: 0 auto;
position: relative;
}
.card2::before{
content: "";
display: block;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background: red;
position: absolute;
top: -15rpx;
left: 0rpx;
}
.card2::after{
content: "";
display: block;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background: red;
position: absolute;
top: -15rpx;
right: 0rpx;
}
2,做一个删除小图标
.del_icon{
width: 50px;
height: 50px;
border-radius: 100%;
outline: 10px solid white;
outline-offset: -34px;
cursor: pointer;
transform: rotate(45deg);
}
3,做一个平行四边形
.top_icon {
position: relative;
top: -2px;
width: 100px;
height: 36px;
line-height: 40px;
text-align: center;
color: white;
font-size: 24px;
margin-left: 0.5vw;
}
.top_icon:before {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background:rgba(27,149,249,1);
z-index: -1;
transform: skewX(-12deg);
}