如何使用HTML-CSS将倾斜/倾斜的背景色设置为文本

Question

我需要实现的是类似以下示例图像中所示的内容。

我需要背景沿着文本增长，因为文本可以是动态的，所以我不能设置静态图像背景。 文本也应该能够与较暗的背景条纹重叠（如您在示例中的“ lorem”的“ l”中所看到的），并且文本可以多于一行。

欢迎使用跨浏览器解决方案。

Answer 1

这样的事情应该让您入门：

<div class="bottom">
    <br>
    <div class="under">
        <div class="over">
            lorem ipsum dolor
        </div>
    </div>
</div>

.bottom {
    background-color: #bbb;
    height: 100px;
}

.under {
    background-color: #555;
    transform: rotate(5deg);
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari and Chrome */
}

.over {
    margin-left: 120px;
    color: white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */
}

例：

http://jsfiddle.net/CxmRg/