The design for a website I worked on recently required slanted boxes, here’s a simplified version of the what the designer had in mind:
Because the site was responsive, using background images wasn’t an option because retaining the slant angle at different widths would mean using lots of different images across breakpoints. This would be too much of a maintenance overhead, not to mention the fact that using a background image for a single colour block would be morally wrong.
The next approach that sprung to mind was using CSS triangles on before and after pseudo elements – a method I’ve used before on City’s course pages for slanted tabs. Unfortunately this method also failed the responsive test as you would need to know the width of the box to get a consistent angled line across the whole div.
My final approach was again to use pseudo elements, but this time applying a css 3 transform on them, skewing the whole element and hiding the overlapping areas. Here’s a pen with the code …