如何用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