如何使用html、css和javascript在网页上划线

我目前正在做一个“井字游戏”的游戏。 这是最新的
我开始升级它的一些功能，但我遇到了一个问题。
我使用下面包含的图像作为游戏的背景图像，并定位了九个输入字段，每个字段位于图像的边缘/侧面，并使用css
我不再想使用背景图像
我有没有办法用css、javascript和/或html来画这些线？
请我将非常高兴，如果它可以用纯html，css和javascript或jquery完成

---

您可以使用2个元素及其伪元素在和

transform:rotate（）

div{
宽度：25%；
边框：1px纯黑；
保证金：自动；
溢出：隐藏；
}
跨度{
显示：块；
垫底：100%；
}
司{
位置：相对位置；
}
div:：after，div:：before，span:：after，span:：before{
内容：''；
位置：绝对位置；
背景：黑色；
}
div：：之后{
最高：50%；
左：0；右：0；
高度：1px；
}
div：：之前{
宽度：1px；
左：50%；
顶部：0；底部：0；
}
span:：之前，span:：之后{
高度：1px；
最高：50%；
左-25%；
右图：-25%；
背景：红色；
}
span：：之前{
变换：旋转（45度）；
}
span：：之后{
变换：旋转（-45度）；
}

---

您还可以使用渐变：

想法

background: 
      linear-gradient(0deg,black,black) repeat-y center, 
      linear-gradient(0deg,black,black) repeat-x center,
      linear-gradient(26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)),
      linear-gradient(-26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)) yellow;
  background-size: 3px 100%, 100% 3px, auto,auto;

这是一个输入的边距和大小也已更新的代码段，该代码段还使用了背景色和阴影

正文{
颜色：黑色；
宽度：26.8厘米；
溢出：滚动；
背景色：白色；
}
.欢迎{
填充：20px；
文本对齐：居中；
背景：#ccc；
}
.过境{
过渡期：5s；
}
#玩家{
颜色：绿色；
}
.gamelet{/*此样式适用于包含十六进制颜色代码的框*/
宽度：5.6cm；
显示：内联块；
垂直对齐：顶部；
}
.配子2{
边缘顶部：4.3厘米；
}
.fr{/*此样式仅适用于红色框*/
左边距：-0.3cm；
宽度：0.6cm；
}
.sr{/*此样式仅适用于绿色框*/
边缘：0.9.6厘米；
宽度：0.6cm；
}
.tr{/*此样式仅适用于蓝色框*/
右边距：-0.3cm；
宽度：0.6cm；
}
分区：第n个孩子（1），
分区：第N个孩子（2），
分区：第n个子（3）{页边距顶部：-0.3cm；}
分区：第n名儿童（7），
分区：第n个孩子（8），
分区：第n个子（9）{页边距底部：-0.3cm；}
.配子1{
边界半径：90px；
宽度：0.6cm；
光标：指针；
}
.董事会{
背景：
线性梯度（0度，黑色，黑色）重复-y中心，
线性梯度（0度，黑色，黑色）重复-x中心，
线性梯度（26度，透明钙（50%-2px），黑色钙（50%-1px），黑色钙（50%+2px），透明钙（50%+2px）），
线性梯度（-26度，透明钙（50%-2px），黑色钙（50%-1px），黑色钙（50%+2px），透明钙（50%+2px））黄色；
背景尺寸：3px 100%，100%3px，自动，自动；
盒影：0.6cm黄色；
边框：实心；
边缘：2厘米3厘米；
}
/*//来自引导的样式*/
.警惕危险{
颜色：#a94442；
背景色：#f2dede；
边框颜色：#ebccd1；
文本对齐：居中；
填充：20px；
显示：无；
}
.警报成功{
颜色：#3c763d；
背景色：#dff0d8；
边框颜色：#d6e9c6；
文本对齐：居中；
填充：20px；
显示：无；
}
.警报信息{
颜色：31708f；
背景色：#d9edf7；
边框颜色：#bce8f1；
文本对齐：居中；
填充：20px；
}

看看这个设计谢谢@SterlingArcher，但这个游戏不是真正的井字游戏。这是另一种形式的抽搐，我不知道怎么称呼它。我想把这些线画得像地图上的线一样image@kofimokome你能在这里上传你的游戏截图吗？因为链接到你的网站可能会死后一段时间。很好的答案！但是stackoverflow Snipppers中有一些JavaScript错误。非常感谢@GCyrillus的回答。我目前正在更新游戏。您可以检查暂存分支。我上面使用的样式在我的项目中不再有效，我也在更新代码。上面的代码是几年前我还在学习HTML时编写的