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