<body >
  <div>
    <p>A straight X</p>
  <svg height="300" width="300">
    <line x1="0" y1="0" x2="150" y2="150" style="stroke:#000; stroke-width:5" />
    <line x1="150" y1="0" x2="0" y2="150" style="stroke:#000; stroke-width:5" />
</svg>
  </div>
    <div>
    <p>A cross</p>
  <svg height="300" width="300">
    <line x1="75" y1="0" x2="75" y2="150" style="stroke:#000; stroke-width:5" />
    <line x1="0" y1="75" x2="150" y2="75" style="stroke:#000; stroke-width:5" />
</svg>
  </div>
    <div>
    <p>An skewed X</p>
  <svg height="300" width="300">
    <line x1="45" y1="0" x2="75" y2="150" style="stroke:#000; stroke-width:5" />
    <line x1="0" y1="55" x2="150" y2="75" style="stroke:#000; stroke-width:5" />
</svg>  </div>

  </body
body {
  background:#fff;
  color: #000;
}
div {
  display: inline-block; width: 30%; margin: 0 auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.