CSS中的交叉边界重叠

Question

im试图将其设置为以节为中心的div块，不确定如何使div边框看起来像这样。右上角和左上角具有交叉效果。正在考虑可能两个div具有绝对位置，然后一个div将两个位置都相对定位

Answer 1

您可以在第二个边框上使用一个伪元素：

.crisscross {
  border: 1px solid #aaaaaa;
  height: 50px;
  position: relative;
  width: 50px;
}

.crisscross:after {
  border: 1px solid #aaaaaa;
  content: "";
  height: 100%;
  margin: 5px;
  position: absolute;
  width: 100%;
}

<div class="crisscross"></div>