div 주위 스타일링 테두리

div 상자 주위의 스타일링 경계선에 조금 붙어 있습니다. 여기 demo div 주위 스타일링 테두리

내가 가지고있는 실제 예는 다음과 같습니다 :

문제처럼 국경이 수 없습니다 할 수 없다는 것입니다

Demo

.num.num_1 { 
 
    border-left-color: #0D2431; 
 
} 
 
.num { 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 50px; 
 
    border-width: 5px; 
 
    font-size: 40px; 
 
} 
 
.num { 
 
    float: left; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border: 2px solid #eee; 
 
    font-size: 20px; 
 
    color: #0D2431; 
 
    background-color: #fff; 
 
} 
 
div { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font: inherit; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
} 
 
}

<div class="num num_1">1</div>

출처

2014-10-28 ummahusla

당신이에 사업부를 추가하고 (변환 ': skew'을, 아마)의 관점을 사용하려고 할 것이다 국경으로이 문제를 해결하기 위해 아무리 잘게 자르더라도 쉽게 구부리지 않습니다. – somethinghere

테두리가 작동하는 방법입니다. 기울어 져 있기 때문에 CSS를 사용하여 삼각형을 만들 수 있습니다. 나는 당신이 찾고있는 것을 얻기 위해 before 의사 요소를 사용할 것이다. – nunopolonia

공유 한 스크린 샷의 웹 사이트에 대한 링크를 공유 할 수 있습니까? –

.num.cheat:before { 
 
    content:""; 
 
    position: absolute; 
 
    left: -5px; 
 
    right: -5px; 
 
    top: -5px; 
 
    bottom: -5px; 
 
    
 
} 
 
.num_1:before { 
 
    border-left: 5px solid black; 
 
} 
 
.num_2:before { 
 
    border-left: 5px solid black; 
 
    border-top: 5px solid black; 
 
} 
 
.num_3:before { 
 
    border-left: 5px solid black; 
 
    border-top: 5px solid black; 
 
    border-right: 5px solid black; 
 
} 
 
.num_4:before { 
 
    border-left: 5px solid black; 
 
    border-top: 5px solid black; 
 
    border-right: 5px solid black; 
 
    border-bottom: 5px solid black; 
 
} 
 
.num { 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 50px; 
 
    border-width: 5px; 
 
    font-size: 40px; 
 
    position: relative; 
 
    margin-right: 10px; 
 
} 
 
.num { 
 
    float: left; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border: 5px solid #eee; 
 
    font-size: 20px; 
 
    color: #0D2431; 
 
    background-color: #fff; 
 
} 
 
div { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font: inherit; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
} 
 
}

<div class="num num_1 cheat">1</div> 
 
<div class="num num_2 cheat">2</div> 
 
<div class="num num_3 cheat">3</div> 
 
<div class="num num_4 cheat">4</div>

나는 당신의 CSS를 조금 수정했습니다. 나는 before : pseudo 요소를 사용하여 그것을 해결했다.

출처

2014-10-28 16:27:14

화려한! 하지만 작은 질문이 있습니다. 그것은 1 번 국경, 4 번 총계, 2 번 국경과 3 번 국경, 3 번 국경, 4 번 국경을위한 경계선과 경계선 -right' 그리고 마침내 4 번 국경 - 왼쪽, 국경 - 정상, 국경 - 오른쪽 및 국경 바닥 - – ummahusla

4 가지 경우 모두에서 작동하도록 바이올린을 편집했습니다. –

완벽! 잘 했어. 고마워. – ummahusla

당신은 중첩 된 div의 이상한 일련의 작업을 수행 할 수 있습니다

.border { 
 
    background: green; 
 
    padding: 10px 10px 10px 0; 
 
    display: inline-block; 
 
} 
 
.border-left { 
 
    padding-left: 10px; 
 
    background: black; 
 
    display: inline-block; 
 
} 
 
.inside-box { 
 
    background: red; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div class="border-left"> 
 
    <div class="border"> 
 
     <div class="inside-box">1</div> 
 
    </div> 
 
</div>

출처

2014-10-28 16:26:04

아직 상자 그림자를 사용하면 추가 요소없이이 작업을 수행 할 수 있습니다.

은 참조 : http://jsfiddle.net/w3b1uh7g/2/

.num { 
    border-left: 0px; 
    box-shadow: -5px 0 0 0 #0D2431; 
}

출처

2014-10-28 16:40:05 Jon

은 그냥 CSS에 다음을 추가합니다. 의사 요소 광장 HTML에 추가 된 div를 추가하지 않고 그것을해야

.num.num_1:before { 
content: ""; 
position: relative; 
display: block; 
top: -5px; 
left: -5px; 
height: 5px; 
width: 5px; 
background: black; 
} 

.num.num_1:after { 
content: ""; 
position: relative; 
display: block; 
bottom: 0px; 
left: -5px; 
height: 5px; 
width: 5px; 
background: black; 
}

출처

2014-10-28 16:44:27 Dvilla

div 주위 스타일링 테두리

답변

관련 문제