Укладка границы вокруг div

Question

Я немного застрял на границе стилизации вокруг окна div.

Проблема заключается в том, что я не могу сделать границы не быть похожим:

Вот реальный пример того, что у меня есть:

.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>

Answer 1

.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 element.

Answer 2

Вы можете сделать странную серию вложенных дивы:

.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>

Answer 3

Еще лучше, вы можете использовать коробку-тень для достижения этого без каких-либо дополнительных элементов.

См: http://jsfiddle.net/w3b1uh7g/2/

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

Answer 4

Просто добавьте их в свой CSS. Псевдо элементы должны сделать его квадрат без добавления дополнительных дивы в HTML

.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; 
}