当游戏胜利后，用线条连接使得游戏胜利的三个方块。
游戏胜利！
1.如何添加线条
在这里我们将用属性选择器给方块添加线条。
.square为线条父级也就是方块的选择器。
属性[data-winFlag=true]需要在JS代码中为特定方块添加。
.square[data-winFlag=true]::before {
content: "";
position: absolute;
width: 1px;
height: 45px; /*这里需要自己调整，根据td的宽度和高度*/
top: auto;
left: auto;
background-color: black;
display: block;
transform: rotate(-45deg); /* 这里需要自己调整，根据线的位置 */
transform-origin: top;
}
上述代码所添加的斜线如下所示。
-45°斜线
明显斜线是不能满足竖向方块相邻胜利的情况。
所以我们要根据胜利的情况，选择不同的线长和旋转情况。
注意：此时旋转点在线条起点，也就是方块左上角。
想让线条水平局中，还需要设定父级类的display:flex 和justify-content: center。
.square {
display:flex;
justify-content: center;
}
2.为不同角度设置选择器
为了区分不同角度，我们将属性[data-winFlag=true]改为[data-degree="{degree}"]
为了让线条从中心旋转，满足贯穿单元格并且其它线条连接的效果。
我们在下面代码中设置了旋转属性transform-origin: 50% 16px， 或者transform-origin: 50% 23px。
（1）纵向连接，0°选择器
90°和0°为横线或者竖线，只有旋转角度不同，所以只列出0°的选择器。
.square[data-degree="0"]::before {
content: "";
position: absolute;
width: 1px;
height: 32px; /*这里需要自己调整，根据td的宽度和高度*/
left: auto;
top: auto;
background-color: black;
display: block;
transform: rotate(0deg); /* 旋转角度 */
transform-origin: 50% 16px; /* 旋转点 */
}
（2）斜向连接，45°选择器
135°和45°为斜线，只有旋转角度不同，所以只列出45°的选择器。
.square[data-degree="45"]::before {
content: "";
position: absolute;
width: 1px;
height: 46px; /*这里需要自己调整，根据td的宽度和高度*/
left: auto;
top: -7px;
background-color: black;
display: block;
transform: rotate(45deg); /* 旋转角度 */
transform-origin: 50% 23px;/* 旋转点 */
}
注意：当线条为斜线时，线条长度大于方块边长。
我们要让线条纵向居中，所以先需要设置top: -7px让线条溢出父节点上方。
并且调整旋转点的Y轴定位transform-origin: 50% 23px。
如果父节点position属性不是relative。
线条会如下所示完全放飞自我，脱离了父节点的“控制”。
线条脱离父节点
设置父节点的属性position:relative。
.square {
position:relative;
}
最终效果如下，线条彼此相连。
最终效果
