Responsive Slanted Divs with CSS

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:

screenshot of design featuring slanted divs

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 …

See the Pen Responsive slanted divs with CSS by Larry Naman (@LarryAnomie) on CodePen.

Port 35729 is already in use by another process

I’ve run into this error a couple of times recently when using the Yeoman webapp generator with Livereload. After trying changing the port used by the Livereload server in the Gruntfile and still seeing the error, running this command in the terminal…

lsof | grep 35729

…confirmed that Sublime Text was the port hogging culprit. Specifically the Livereload Sublime plugin. Disabling this plugin resolved the conflict.

Backbone Views Scoped Queries

Like Dave Brailsford, I’m a fan of marginal gains and love discovering small tips and tricks to optimise my development workflow. So in the spirit of marginal gains, here’s a tiny productivity tip for Backbone.js that I stumbled upon the the other day.

If you have jQuery included and need to target a child of your view’s el, instead of this…


You can just write…


BOOM. milliseconds of typing time saved.

Every Backbone view has a $ function that runs scoped queries within the view’s el. Probably obvious to most as it’s right there in the docs, but I only just noticed it so am recording it here as an aide memoir.