像Cinemax標誌（角度結束的背景）的CSS效果

Question

我傾斜了文字和背景使用-webkit-transform: rotate(-#deg);和background選擇器，但背景的末端保持垂直於文本。如何定製切斷端點的程度（按照Cinemax標誌）。

我試圖把跨度父div來切斷邊緣，但它的棘手。在CSS中調整背景的最佳方式是什麼？

Answer 1

除了rotate，你也應該skew你的元素：

div { 
    transform: rotate(-5deg) skew(-10deg); 
} 

這裏的小提琴：http://jsfiddle.net/VANrX/