Как сделать разделенный на две части border?

Question

[Михаил]

Как можно сделать подобный трюк с границами в css? При этом все должно быть на прозрачном фоне...

Comments

[roswell]

Хоть бы картинку нарисовал. На две части можно поделить как минимум десятком способов.

Answer 1

[0xD34F]

Псевдоэлементами. Например.

Answer 2

[tema_sun]

:before, :after с градиентом в прозрачность.

Как-то так:

:before{
content: "";
display: block;
width: 3px;
height: 100%;
background: linear-gradient(to bottom,  #000 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 50%, #000 50%);
}