效果:
代码如下:
.invoice-content {
position: relative;
width: 622px;
height: 148px;
background-color: $itemSelectedBgColor;
border: 2px dotted $mainGreenColor;
li {
height: 74px;
line-height: 74px;
font-size: 28px;
color: $wrapperTextColor;
.label {
float: left;
margin-left: 24px;
}
.content {
float: right;
max-width: 340px;
margin-right: 24px;
font-weight: bold;
color: $TextColor;
}
i {
color: $deleteColor;
}
}
}
.invoice-content:before {
content: '';
position: absolute;
top: 58px;
left: -16px;
width: 32px;
height: 32px;
background-color: #fff;
border-right: 2px dotted $mainGreenColor;
border-radius: 0 50px 50px 0; // 将左上和左下角的radius设置为0以改善效果
}
.invoice-content:after {
content: '';
position: absolute;
top: 58px;
right: -16px;
width: 32px;
height: 32px;
background-color: #fff;
border-left: 2px dotted $mainGreenColor;
border-radius: 50px 0 0 50px; // 将右上和右下角的radius设置为0以改善效果
}
实现: 利用伪类先在元素的左右两侧画一个带边框的圆,然后将左侧圆的左半部分和右侧圆的有半部分的border-radius设置为0以保证效果
ps:上述css代码是从本人代码直接copy过来,颜色及class命名问题请自动忽略