需求：为数字加上正六边形边框
分解一：正六边形，可视为三个同样的长方形，经过不同角度旋转后叠加形成
分解二：根据数学公式可以算出，一个长方形旋转60度，一个长方形旋转120度，重叠形成
分解三：根据数学公式可以算出，长方形长宽比为√3:1
<html>
<head>
<style>
#dec {
width: 173px;
height: 100px;
border-left:1px solid red;
border-right:1px solid red;
position: relative;
}
#dec:before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: 173px;
height: 100px;
border-left:1px solid green;
border-right:1px solid green;
transform: rotate(60deg);
}
#dec:after {
content: "";
position: absolute;
top: 0;
left: -1px;
width: 173px;
height: 100px;
border-left:1px solid blue;
border-right:1px solid blue;
transform: rotate(120deg);
}
</style>
</head>
<body>
<div id="dec"></div>
</body>
</html>
分解四：为什么要给旋转图形加上left: -1px呢？是因为图形越小时，border造成的视觉偏移效果越明显，具体偏移不用计算，一般不会出现特别小的存在，建议边框多大直接偏移多大