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