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