html、css、およびjavascriptを使用してウェブページに線を描く方法

Question

現在、「tic tac toe like」ゲームを行っています。 これはlinkです。
私はいくつかの機能をアップグレードし始めましたが、問題があります。
私はゲームの背景画像として以下の画像を使用し、9つの入力フィールドを1つずつ配置しました。
私はもはや背景画像を使いたくありません。
CSS、javascript、htmlでこれらの行を描画する方法はありますか？
それはjqueryの純粋なHTML、CSSおよびJavaScriptでまたはで行うことができる場合、私はとても幸せになりますしてください

Answer 1

あなたは絶対の位置決めとtransform: rotate()で線を描画するために2つの要素とそれらの擬似要素を使用することができます

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

注：複数の利用（#gameletのコードスニペットは.gameletになっ）場合

IDは唯一の代わりに使用するクラス、一度文書ごとに使用することができる