边框与框对齐

Question

我在草图中设计了一个侧边栏，里面有四排，每个边都是边框。

我想知道是否有可能获得这样的边界？

我附上了我设计的照片，所以你可以看出我的意思。

Answer 1

U可以使用css中的:after元素处理它。

这是一个例子

.demo:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 2rem;
    bottom: 0;
    left: 50%;
    border-left: 2px solid #000;
    height:30px;
} 

Answer 2

试试这个：

div {
  width: 200px;
  height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 80px;
  background: black;
  left: -10px;
  top: 10px;
  box-shadow: 220px 0 0 0 black;
}
div:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 180px;
  background: black;
  left: 10px;
  top: -10px;
  box-shadow: 0 120px 0 0 black;
}

HTML：

<div>content div</div>