CSS3는 모서리에 모서리가 만나지 않는 모서리가 없습니다.

Question

힘든 모퉁이입니다. 나는 모서리를 자르고 싶다. 그래서 선들은 모서리에서 결코 만납니다.

처음에는 두 개의 div가 중첩되어 있고 테두리 오른쪽과 테두리 아래 div가있을 수 있다고 생각했지만 작동하지 않습니다. 어떤 아이디어라도 도움이 될 것입니다.

내가 볼 수있는 이미지가 첨부되어 있습니다.

[1]

Answer 1

당신은 :before 및 :after 사용할 수 있습니다 [이미지 여기에 설명 입력] :! 의사 요소를. 나는 ">"이 아래로 간격을 유지하는 경우

#container { 
 
    width: 550px; 
 
    height: 200px; 
 
    background-color: #222426; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    width: 275px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    position: relative; 
 
    color: #FFFFFF; 
 
} 
 
.box:first-child:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 3%; 
 
    background-color: #777777; 
 
    width: 1px; 
 
    height: 90%; 
 
} 
 
.box:nth-child(3):after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 3%; 
 
    background-color: #777777; 
 
    width: 1px; 
 
    height: 90%; 
 
} 
 
.box:first-child:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 1%; 
 
    bottom: 0; 
 
    background-color: #777777; 
 
    height: 1px; 
 
    width: 90%; 
 
} 
 
.box:nth-child(2):before { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 1%; 
 
    bottom: 0; 
 
    background-color: #777777; 
 
    height: 1px; 
 
    width: 91%; 
 
}

<div id="container"> 
 
    <div class="box">Some Content</div 
 
    ><div class="box">Some Content</div 
 
    ><div class="box">Some Content</div 
 
    ><div class="box">Some Content</div> 
 
</div>