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

Question

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

我需要在文本中增长背景，因为文本可以是动态的，所以我无法设置静态图像背景。此外，文本应该能够与较暗的背景条纹重叠（如示例中“lorem”的“l”所示）并且可能有多行文本。

欢迎Crossbrowser解决方案。

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/