Need Some help on html5 canvas

Question

I am not a professional in HTML css and I have a design to convert in HTML . I read about canvas but I did'nt get idea that how can I fulfill my requirement. I search a lot but nothing very help full.

Here is my design:

Its a banner area and have three parts.

1. Banner Image (Car Pic)
2. Transparent triangle type div
3. And there are nav (menus)

I just want to know that how can I create this triangle type div because I have no idea.

So please give me a helpful solutions. I am very thank full to you.

Note: Its also a responsive.

Answer 1

My advice would be to separate nav from the rotated div, and as @krisph said you just need to apply a transform: rotate(45deg) on that div and leave it fixed. Then apply a transform: rotate(45deg) on each square point. You don't even need to use canvas I guess !