Question

I have tilted text and a background using -webkit-transform: rotate(-#deg); and background selectors, but the ends of the background stay perpendicular to the text. How can I customize the degree at which the ends are cut off (à la the Cinemax logo).

I’ve tried putting the span in a parent div to cut off the edges, but it’s tricky. What’s the best way to angle the ends of the background in CSS?

Answer 1

In addition to the rotate, you should also skew your element:

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

Here’s the fiddle: http://jsfiddle.net/VANrX/