Responsive Angles

I had a design I needed to code that was a bit of a fun challenge. Here were the requirements:

  1. The header looked like a “tab” on top of a utility nav that was transparent
  2. There was a diagonal angle on the right side of the logo, on top of the utility nav, with a white background expanding 100% of the width, outside of the container to the viewport
  3. The angle needed to stay in the same place to the right of the logo, no matter the viewport width.

So I played around with it (a bit more than I probably should!) and came up with a quick and easy answer.

  1. I used a div outside the container that used JS to calculate the width between the viewport and the container’s left edge
  2. A div inside the container to take care of the white background inside
  3. A :before on div #2 for the CSS angle (using borders) and a negative position.

Take a look, no images required!

See the Pen Responsive Angles by Amber Weinberg (@amberweinberg) on CodePen.

Seth (@nternetinspired) has provided an interesting alternative solution without JS, but I haven’t gotten it to work for specific case yet.

I love how you can do one thing a hundred different ways on the web!