How to replace html red and green vertical and horizontal lines with svg lines?-CodePudding

I am wanting to replace the green and red lines with svg lines.

How do I do that?

The lines that go left and right, and up and down.

I want to replace them with svg lines.

That is all I am doing.

I want to replace the html lines with svg lines.

How do I do that?

That is all I am doing.

code https://jsfiddle.net/L1brz6xv/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  display: flex;
  min-height: 100vh;
  align-content: center;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}
.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
 
 
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid blue;
  pointer-events: none;
}


.fence div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right:0;
  /*width: 100%;*/
  height: 0.55%;
  background: green;
}

.fence div:nth-child(1) {
  top: 10%;
}

.fence div:nth-child(2) {
  top: 20%;
}

.fence div:nth-child(3) {
  top: 30%;
}

.fence div:nth-child(4) {
  top: 40%;
}

.fence div:nth-child(5) {
  top: 50%;
}

.fence div:nth-child(6) {
  top: 60%;
}

.fence div:nth-child(7) {
  top: 70%;
}

.fence div:nth-child(8) {
  top: 80%;
}

.fence div:nth-child(9) {
  top: 90%;
}


.cross::before,
.cross::after {
  content: "";
  background: red;
}

.cross::before

/*horizontal*/
  {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 100%;*/
  height: 2.8%;
  /*height: 10px;*/
}

.cross::after

/*vertical*/
  {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 10px;*/
  width: 1.5%;
  /*height: 100%;*/
}

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

  
       <div ></div>

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

CodePudding user response：

Here your code supplemented with SVG code.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.outer {
  display: flex;
  min-height: 100vh;
  align-content: center;
}
.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}
.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}
.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid blue;
  pointer-events: none;
}

<div >
  <div >
    <div >
      <svg width="100%" height="100%" style="position: absolute; top: 0;">
        <defs>
          <line id="row" x2="100%" stroke="green" />
        </defs>
        <use href="#row" y="10%" />
        <use href="#row" y="20%" />
        <use href="#row" y="30%" />
        <use href="#row" y="40%" />
        <use href="#row" y="60%" />
        <use href="#row" y="70%" />
        <use href="#row" y="80%" />
        <use href="#row" y="90%" />
        <line y1="50%" x2="100%" y2="50%" stroke="red" stroke-width="10" />
        <line x1="50%" x2="50%" y2="100%" stroke="red" stroke-width="10" />
      </svg>
    </div>
  </div>
</div>