边框与框对齐

Question

我在sketch中设计了一个侧边栏，里面有四行，每行都有一个边框。

我想知道是否可以得到这样的边框？

我附上了我的设计图片，所以你可以明白我的意思。

Answer 1

你可以用 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>

边框与框对齐

Border aligned to box

html

css

border