Umrandung zu Feld

Question

Ich entwarf in Skizze eine Seitenleiste mit vier Reihen innen, jedes von ihnen ist getrennt mit einer Grenze.

Ich würde gerne wissen, ist es möglich, Grenzen wie diese oder nicht?

Ich fügte ein Bild von meinem Design, so dass Sie sehen könnten, was genau ich meine.

Answer 1

U kann es mit einem :after Elemente in CSS behandeln.

Hier ist ein Beispiel

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

Answer 2

Try this:

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>