css - 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/