How to draw cross diagonal lines without using SVG or HTML Canvas

Question

How to draw cross diagonal lines without using SVG or HTML Canvas ?

My tutor hope we use simple CSS to make it.

Possible duplicate of [draw diagonal lines in div background with CSS](https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css) — Jon Uleis, Aug 18 '17 at 04:15

score 2 · Answer 1 · answered Aug 18 '17 at 04:25

Here's two diagonal lines forming an X using only CSS and one element.

.x {
  width: 100px;
  height: 100px;
  position: relative;
}

.x::before,
.x::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-right: 1px solid #000;
}

.x::before {
  transform: rotate(45deg) translate(-50px, 0);
}

.x::after {
  transform: rotate(-45deg) translate(-50px, 0);
}

<div class="x"></div>

How to draw cross diagonal lines without using SVG or HTML Canvas

1 Answers1