利用padding绘制图形

发表于 | 分类于

借助padding实现三道杠

1
<div class="tri-line"></div>
1
2
3
4
5
6
7
8
.tri-line{
	width:150px;
	height:30px;
	border-top:30px solid;
	boder-bottom:30px solid;
	background-color:currentColor;
	background-clip:content-box;
}

借助padding实现白眼效果

1
<div class="eye"></div>
1
2
3
4
5
6
7
8
9
.eye{
	width:150px;
	height:150px;
	padding:10px;
	border:10px solid;
	border-radius:50%;
	background-color:currentColor;
	background-clip:content-box;
}

参考:css padding与图形绘制–张鑫旭