css - 类似 Cinemax 标志的 CSS 效果（背景的角端）

Question

我使用-webkit-transform: rotate(-#deg);和background选择器倾斜了文本和背景，但背景的末端与文本保持垂直。如何自定义末端被切断的程度（à la Cinemax 标志）。

我尝试将跨度放在父 div 中以切断边缘，但这很棘手。在 CSS 中倾斜背景末端的最佳方法是什么？

Answer 1

除了rotate，您还应该使用skew您的元素：

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

这是小提琴：http: //jsfiddle.net/VANrX/