이런 종류의 테두리 CSS를 만드는 방법은 무엇입니까?

Question

이 디자이너 (Mason Yarnell)는이 경계를 3 개의 메뉴 막대 섹션을 구분하도록 어떻게 설계 했습니까?

내가보기에, 그것의 단단한 국경 이상.

https://dribbble.com/shots/1315388-Dashboard-Web-App-UI-Job-Summary/attachments/184703

Answer 1

이 테두리 만들기 위해이 CSS를 사용할 수

Demo

CSS는 : -

.main{height: 20px;width: 400px;margin: 100px auto;} 
.main ul li{padding:10px;border-top:1px solid #2b3544;border-bottom:1px solid #303a4a;list-style: none;min-height: 50px;position: relative;} 
.main ul li:after{border-bottom: 1px solid #293241;content: '';width: 100%;height: 1px;position: absolute;left:0px;top:-4px;} 
.main ul li:before{border-bottom: 1px solid #3d495d;content: '';width: 100%;height: 1px;position: absolute;left:0px;top:-1px;} 
.main ul li:first-child{border-top:none;} 
.main ul li:last-child{border-bottom:none;} 
.main ul li:first-child:after ,.main ul li:first-child:before{display: none;}