css：绘制简易描边图形

在用html + css实现我的简历文档的时候，需要用到几个简单多边形，所以采用了css来描绘

这是所需效果图的样子：

我的思路：
绘制描边图形，应该用多个div进行旋转、移动、设置边框的颜色宽度来实现

以下是代码讲解：

.six-side {
	width: 86.6px;height: 50px;
	position: relative;top: 40px;
	transform: scale(0.8,0.8);/*设置整个图形的缩放*/
	display: inline-block;/*允许多个图形并排放置*/
	text-align: center;vertical-align: middle;
	font-size: 40px;line-height: 40px;
	border-left: 1px solid #0a3c79;/*div左右两边出现蓝色边框*/
	border-right: 1px solid #0a3c79;
}
/*以下同理*/
.six-side::before {
	content: "";
	position: absolute;
	width: 50px;height: 86.6px;
	left: 18px;top: -19px;
	transform: rotate(30deg);/*旋转30°角*/
	border-top: 1px solid #0a3c79;
	border-bottom: 1px solid #0a3c79;
}
.six-side::after {
	content: "";
	position: absolute;
	width: 50px;height: 86.6px;
	left: 18px;top: -19px;
	transform: rotate(150deg);
	border-top: 1px solid #0a3c79;
	border-bottom: 1px solid #0a3c79;
}