信封撕条效果 css

记录实现过程 先上图看效果 

 

//下部分
		.bottom-main{
			width: 100%;
			background-color: #fff;
			border-top:2px dashed  #eee;
			position: relative;
			padding: 35rpx;
		} 
		.bottom-main::before{
			background-color: #eee; 
			content:'';
			display:block;
			border-radius: 50%;
			width:30rpx;
			height:30rpx;
			position: absolute;
			left:-15rpx;
			top:-15rpx;
		} 
		.bottom-main::after{
			background-color: #eee;
			content:'';
			display:block;
			border-radius: 50%;
			width:30rpx;
			height: 30rpx;
			position: absolute;
			right:-15rpx;
			top:-15rpx;
		}

主要是利用 伪类元素  和 上边框虚线 来完成的 top 和right值刚好是宽高的一半