2017-03-18 129 views
1

如何使用CSS樣式邊框這樣CSS - 樣式邊框標題

enter image description here

這裏是我當前的css

header .fixed-header .left h2 { 
    font-size: 14px; 
    display: inline-block; 
    border-bottom: 1px solid #000; 
} 

,但只是做一個邊框在底部標題,我如何樣式像上面的圖像的邊框權利

+0

有你看着':before'和':after'僞元素呢? – haxxxton

回答

2

用僞元素和transform: skew()

h2 { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 0 2em; 
 
} 
 
h2:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    border: solid black; 
 
    border-width: 0 1px 1px 0; 
 
    transform: skew(-45deg); 
 
    transform-origin: bottom; 
 
}
<h2>asdf</h2>

+0

非常感謝你! – vinnlee

+0

@vinnlee你打賭:) –