css利用伪元素实现发票样式的边框

效果：

代码如下：

.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命名问题请自动忽略