2014-10-28 128 views
0

我有點卡在div框的造型邊框上。圍繞div的造型邊框

的問題是,我不能讓邊界不象:

demo

這裏是真實的例子我有:

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>

+0

您將有一個div添加到這一點,並嘗試使用透視('變換:skew',也許)來解決這個問題,如邊界無論你如何切片,它們都很難成角度。 – somethinghere 2014-10-28 16:18:01

+0

這就是邊界如何工作,它們是傾斜的,這就是允許你使用它們來使用CSS製作三角形的原因。我會使用之前的僞元素來實現你正在尋找的東西。 – nunopolonia 2014-10-28 16:24:29

+0

你可以分享你已經共享的截圖網站的鏈接嗎? – 2014-10-28 16:33:08

回答

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僞元素解決了它。

+0

太棒了!但我有一個小問題。這是一個數字1的邊框,我總共有4個數字,我可以如何使用數字2'border-left'和'border-top',對於數字3'border-left','border-top'和'border最後爲數字4'border-left','border-top','border-right'和'border-bottom' – ummahusla 2014-10-28 16:40:01

+0

我編輯了小提琴,使它在所有四種情況下工作 – 2014-10-28 16:46:23

+0

完美!幹得好,非常感謝。 – ummahusla 2014-10-28 16:50:24

0

你可以做嵌套的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>

1

更好的是,你可以使用box-shadow來實現這一點,而不需要額外的元素。

請參見:http://jsfiddle.net/w3b1uh7g/2/

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

只需把它們添加到你的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; 
}