CSS를 오른쪽 이미지의 왼쪽 테두리 위쪽 테두리를 통해

Question

체크 갈이 밖으로 당신은 왼쪽 상단과 오른쪽 상단 모서리를 참조 CSS 코드

.xyz { 
    margin: 50px; 
    width: 300px; 
    height: 300px; 
    background-color: #fff; 
    border-right: 1px solid #DEDEE0; 
    border-bottom: 1px solid #DEDEE0; 
    border-left: 1px solid #DEDEE0; 
    border-top: 3px solid #73A784; 
} 

http://codepen.io/anon/pen/jfIil/

? 왜 이런 식으로? 어떻게 해결할 수 있습니까? 나는 모서리에있는 "cutted"를 얻는 최고 국경에 대해서 이야기하고있다 ... 감사합니다 !!

Answer 1

.box { 
    width: 150px; 
    height: 150px; 
    margin: 20px auto; 
    border-color: red blue green yellow; 
    border-style: solid dashed dotted double; 
    border-width: 20px 10px 5px 15px; 
} 

이렇게하면 4 개의 테두리 각각에 대해 다양한 너비, 테두리 색 및 테두리 스타일이 설정됩니다.

또한 각 속성은 border-left-style, border-top-width, border-bottom-color 등으로 세분화 할 수 있습니다.

Checkout the fiddle here to understand better

.box { 
    width: 150px; 
    height: 150px; 
    margin: 20px auto; 
    border-color: red blue green yellow; 
    border-style: solid dashed dotted double; 
    border-width: 20px 10px 5px 15px; 
} 

Solution here

CSS

.xyz { 
    margin: 50px; 
    width: 300px; 
    height: 300px; 
    background-color: #fff; 
    border-left: 20px solid black; 
    border-right: 20px solid black; 
    box-shadow: 0px -20px 0 0 red; 
    height: 150px; 
    width: 150px; 
}