如何在不使用SVG或HTML Canvas的情况下绘制交叉对角线

Question

如何在不使用SVG或HTML Canvas的情况下绘制交叉对角线？

我的导师希望我们使用简单的CSS来制作它。

Answer 1

这里有两条对角线，仅使用CSS和一个元素形成一个X.

.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>