完全用css代码实现二维码扫描图标

二维码扫描的图标我们经常会用到。一般都是用图片的办法，也有用字体图标的方式。下面这个是用存css来对div进行样式控制来实现的。下面的代码主要借鉴了uniaop

<style>
	.content.top-corner[data-v-36e63766]::after {

		position: absolute;
		top: 0;
		right: 0;
		content: "";
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		border-right: 4px solid #01b1fc;
		border-top: 4px solid #01b1fc;
		border-top-right-radius: .3125rem;

	}

	.content.top-corner[data-v-36e63766]::before {
		content: "";
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		border-left: 4px solid #01b1fc;
		border-top: 4px solid #01b1fc;
		border-top-left-radius: .3125rem;
	}

	.content[data-v-36e63766] {
		position: relative;
		display: inline-block;
		top: 1.25rem;
		left: calc(50% - 2.1875rem);
		margin: 0 auto;
		height: 4.375rem;
		width: 4.375rem;
	}

	.content .bottom-corner.bottom-corner[data-v-36e63766]::after {
		float: right;
		content: "";
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		border-right: 4px solid #01b1fc;
		border-bottom: 4px solid #01b1fc;
		border-bottom-right-radius: .3125rem;
	}

	.content .bottom-corner.bottom-corner[data-v-36e63766]::before {
		content: "";
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		border-left: 4px solid #01b1fc;
		border-bottom: 4px solid #01b1fc;
		border-bottom-left-radius: .3125rem;
	}

	.content .bottom-corner[data-v-36e63766] {
		position: absolute;
		bottom: .25rem;
		left: 0;
		height: 1.25rem;
		width: 100%;
	}

	.content .line[data-v-36e63766] {
		margin-top: .625rem;
		height: .125rem;
		width: 100%;
		background-color: #01b1fc;
		box-shadow: .0625rem 0 .625rem #01b1fc;
	}

	a[data-v-36e63766] {
		text-decoration: none;
	}
</style>

<a href="#" class="content top-corner" data-v-36e63766="">
	<div class="bottom-corner" data-v-36e63766="">
	</div>
	<div class="line" data-v-36e63766=""></div>
</a>

效果演示：