css - CSS中重叠的交叉边界

Question

我试图将其设置为以部分为中心的 div 块，不知道如何使 div 边框看起来像这样。右上角和左上角有纵横交错的效果。正在考虑可能两个具有绝对定位的 div，然后一个 div 用相对定位将它们都包裹起来

标签： css

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>