如何使用html，css和javascript在网页上绘制线条

Question

我目前正在研究“tic tac toe like”游戏。 这是link。
我开始升级其某些功能，并遇到问题。
我用下面的图像作为游戏的背景图像，我定位了九个输入字段，每个图像边缘/一边用css。
我不想再使用背景图片。
有没有什么办法可以用css，javascript和/或html绘制这些线条？
请我会很高兴，如果它可以与纯HTML，CSS和做JavaScript或使用jQuery

Answer 1

您可以使用2个元素和它们的伪元素绘制在绝对定位和transform: rotate()线

div { 
 
    width: 25%; 
 
    border: 1px solid black; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 
span { 
 
    display: block; 
 
    padding-bottom: 100%; 
 
} 
 
div,span { 
 
    position: relative; 
 
} 
 
div::after,div::before,span::after,span::before { 
 
    content: ''; 
 
    position: absolute; 
 
    background: black; 
 
} 
 
div::after { 
 
    top: 50%; 
 
    left: 0; right: 0; 
 
    height: 1px; 
 
} 
 
div::before { 
 
    width: 1px; 
 
    left: 50%; 
 
    top: 0; bottom: 0; 
 
} 
 
span::before,span::after { 
 
    height: 1px; 
 
    top: 50%; 
 
    left: -25%; 
 
    right: -25%; 
 
    background: red; 
 
} 
 
span::before { 
 
    transform: rotate(45deg); 
 
} 
 
span::after { 
 
    transform: rotate(-45deg); 
 
}

<div><span></span></div>

Answer 2

你也可以使用渐变：

想法

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; 

这里是输入更新太保证金和大小的一个片段，片断还采用了背景颜色和阴影。

body { 
 
    color: black; 
 
    width: 26.8cm; 
 
    overflow: scroll; 
 
    background-color: white; 
 
} 
 

 
.welcome{ 
 
    padding:20px; 
 
    text-align: center; 
 
    background: #ccc; 
 
} 
 
.transit{ 
 
    transition: 5s; 
 
} 
 
#player{ 
 
    color: green; 
 
} 
 
.gamelet { /*This style is for the boxes containing the hexadecimal color codes*/ 
 
    width: 5.6cm; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.gamelet2 { 
 
    margin-top: 4.3cm; 
 
} 
 

 
.fr { /*This style is for the red box only*/ 
 
    margin-left: -0.3cm; 
 
    width:0.6cm; 
 
} 
 

 
.sr { /*This style is for the green box only*/ 
 
    margin:0 9.6cm; 
 
    width:0.6cm; 
 
} 
 

 
.tr { /*This style is for the blue box only*/ 
 
    margin-right:-0.3cm; 
 
    width:0.6cm; 
 
} 
 
div:nth-child(1), 
 
div:nth-child(2), 
 
div:nth-child(3){margin-top:-0.3cm;} 
 
div:nth-child(7), 
 
div:nth-child(8), 
 
div:nth-child(9){margin-bottom:-0.3cm;} 
 
.gamelet1 { 
 
    border-radius: 90px; 
 
    width: 0.6cm; 
 
    cursor: pointer; 
 
} 
 

 
.board { 
 
    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; 
 
    box-shadow: 0 0 0 0.6cm yellow; 
 
    border:solid; 
 
    margin: 2cm 3cm; 
 
} 
 

 
/*//styles from bootstrap*/ 
 
.alert-danger { 
 
    color: #a94442; 
 
    background-color: #f2dede; 
 
    border-color: #ebccd1; 
 
    text-align: center; 
 
    padding:20px; 
 
    display: none; 
 
} 
 

 
.alert-success { 
 
    color: #3c763d; 
 
    background-color: #dff0d8; 
 
    border-color: #d6e9c6; 
 
    text-align: center; 
 
    padding:20px; 
 
    display: none; 
 
} 
 

 
.alert-info { 
 
    color: #31708f; 
 
    background-color: #d9edf7; 
 
    border-color: #bce8f1; 
 
    text-align: center; 
 
    padding:20px; 
 
}

<script src="https://kofimokome.github.io/tic-tac-toe/TTT_files/TTTscript.js"></script> 
 
<form name="game" class="board"> 
 
    <div class="gamelet fr"><input onclick="C_11(cplayer); autoname(0);" name="C11" type="text" class="gamelet1" /></div> 
 
    <div class="gamelet sr"><input onclick="C_12(cplayer); autoname(1);" name="C12" type="text" class="gamelet1" /></div> 
 
    <div class="gamelet tr"><input onclick="C_13(cplayer); autoname(2);" name="C13" type="text" class="gamelet1" /></div> 
 
    <div class="gamelet fr"><input onclick="C_21(cplayer); autoname(3);" name="C21" type="text" class="gamelet1 gamelet2" /></div> 
 
    <div class="gamelet sr"><input onclick="C_22(cplayer); autoname(4);" name="C22" type="text" class="gamelet1 gamelet2" /></div> 
 
    <div class="gamelet tr"><input onclick="C_23(cplayer); autoname(5);" name="C23" type="text" class="gamelet1 gamelet2" /></div> 
 
    <div class="gamelet fr"><input onclick="C_31(cplayer); autoname(6);" name="C31" type="text" class="gamelet1 gamelet2" /></div> 
 
    <div class="gamelet sr"><input onclick="C_32(cplayer); autoname(7);" name="C32" type="text" class="gamelet1 gamelet2" /></div> 
 
    <div class="gamelet tr"><input onclick="C_33(cplayer); autoname(8);" name="C33" type="text" class="gamelet1 gamelet2" /></div> 
 
</form>

a codepen to fork & play with

注：

ID可以只被每个文档使用一次，使用类，而不是如果多个使用的形式（#gamelet代码段变成.gamelet）