Side navbar to slide out into diagonal div

Question

I'm very new to diagonal divs and need to replicate the attached home page and menu but I have absolutely no idea how. Please can someone point me in the right direction? I've googled it all day long but I can't find out what I'm really asking so I thought I'd ask here with the help of pictures in the hope you clever bunch can give me some pointers. Thanks for reading my dilemma.

Answer 1

Try clip-path for the diagonal

https://css-tricks.com/working-with-shapes-in-web-design/#shapes-clip-path

.nav {
  background-color: red;
  height: 100%;
  width: 300px;
  position: absolute;
  right: 0;
  clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
}