如何用CSS實現這個傾斜的div實現

Question

如何用CSS實現這一點？請參閱附件圖片。

Answer 1

有很多方法可以實現這一點;你可以簡單地use a forward-slash as the content of a pseudo element。這會比使用轉換/傾斜的選項更進一步。

<span>Item One</span><span>Item Two</span> 

span:after { 
    content: "/"; 
    font-size: 5em; 
    vertical-align: middle; 
} 

span:last-child:after { 
    content: none; 
} 

的另一種方法，如我在前面段落中提到的，是skew a pseudo element。

span::after { 
    content: ""; 
    margin: 0 1em; 
    background: black; 
    display: inline-block; 
    vertical-align: middle; 
    transform: skewX(-20deg); 
    width: .5em; height: 5em; 
} 

span:last-child::after { 
    content: none; 
} 

需要注意的是與僞元素打交道時，請記住，Internet Explorer 8中支持他們，但只能與一個:前綴是非常重要的。直到Internet Explorer 9，您纔可以將它們與::一起使用。

Answer 2

你可以用一個div給它的一邊border然後用-webkit-transform到rotate它。

<div class="background"> 
</div> 
<div><label>Some Text Here</label></div> 
<div id="dv"> 
<label>Some Different Text Here</label> 
</div> 

CSS

.background { 
border-top: 3px solid #ccc; 
padding: 0; 
margin: 0; 
height: 50px; 
-webkit-transform: translateY(-20px) 
translateX(5px) 
rotate(330deg); 
} 
#dv 
{ 
-webkit-transform: translateY(-30px) translateX(300px) rotate(-1deg); 
} 

這裏的DEMO