HTML
<div class="card">
<div class="card-item">
<div class="card-item_left"></div>
<div class="card-item_right"></div>
<div class="ball-t" />
<div class="ball-b" />
</div>
</div>
CSS
.card {
width: 100%;
height: auto;
overflow-x: hidden;
overflow-y: auto;
.card-item {
position: relative;
width: 100%;
height: 2rem;
display: flex;
justify-content: space-between;
border-radius: 0.2rem;
box-sizing: border-box;
background-color: #fef7f7;
box-sizing: border-box;
overflow: hidden;
&_left {
position: relative;
width: 2rem;
height: 100%;
border: 1px #fae4e4 solid;
border-right: 0;
border-radius: 0.2rem 0 0 0.2rem;
overflow: hidden;
&::before {
content: "";
height: 80%;
border: 1px dashed #fae4e4;
position: absolute;
left: 2rem;
top: 0;
bottom: 0;
margin: auto;
margin-left: -2px;
}
}
&_right {
position: relative;
flex-grow: 1;
height: 100%;
border: 1px #fae4e4 solid;
border-left: 0;
border-radius: 0 0.2rem 0.2rem 0;
overflow: hidden;
}
.ball-t {
position: absolute;
width: 0.3rem;
height: 0.3rem;
background: #f6f7fb;
left: 2rem;
top: -7%;
transform: translateX(-50%);
border-radius: 1rem;
border: 1px #fae4e4 solid;
z-index: 10;
}
.ball-b {
position: absolute;
width: 0.3rem;
height: 0.3rem;
background: #f6f7fb;
left: 2rem;
bottom: -7%;
transform: translateX(-50%);
border: 1px #fae4e4 solid;
border-radius: 1rem;
z-index: 10;
}
}
}
结果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c5634dfa97fed3fe067e8339394f17af.png#pic_center)