I had a design I needed to code that was a bit of a fun challenge. Here were the requirements:
- The header looked like a “tab” on top of a utility nav that was transparent
- 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
- 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.
- I used a div outside the container that used JS to calculate the width between the viewport and the container’s left edge
- A div inside the container to take care of the white background inside
- 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!