借助css我们可以画出许多图形，从而减少美术的需求，今天就通过纯css绘制一个空性五角形。步骤如下：

第一步：绘制五角形 借助css属性clip-path剪切出可现实路径，如下效果都是通过以上属性实现。

clip-path内置多个绘制函数，可实现矩形、圆、椭圆等形状的切割，clip-path文档。 这里使用多边形函数polygon，填入对应点坐标会自动连接成闭合图形。代码如下：

.star {
	width: 50px;
	height: 50px;
	clip-path: polygon(50% 0, 61.5% 38.5%, 100% 38.5%, 71.5% 63%, 82% 100%, 50% 79%, 20% 100%, 30% 63%, 0% 38.5%, 38.5% 38.5%);
	background: rgba(0,0,0,.2);
}

第二步：绘制空心 借助after或before填充内部五角形，伪类的宽高比元素小一个尺寸即可。代码如下:

.star {
	position: relative;
	width: 50px;
	height: 50px;
	clip-path: polygon(50% 0, 61.5% 38.5%, 100% 38.5%, 71.5% 63%, 82% 100%, 50% 79%, 20% 100%, 30% 63%, 0% 38.5%, 38.5% 38.5%);
	background: rgba(0,0,0,.2);
	
	&::before {
		content: '';
		position: absolute;
		top: 1px;
		left: 1px;
		width: calc(100% - 2px);
		height: calc(100% - 2px);
		clip-path: polygon(50% 0 61.5% 38.5%, 100% 38.5%, 71.5% 63%, 82% 100%, 50% 79%, 20% 100%, 30% 63%, 0% 38.5%, 38.5% 38.5%);
		background: white;
	}
}