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