與框對齊的邊框

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>