Html 侧导航条滑出到对角div中

我对对角线div非常陌生，需要复制附加的主页和菜单，但我完全不知道如何复制。有人能给我指一下正确的方向吗？我在谷歌上搜索了一整天，但我不知道我到底在问什么，所以我想在这里借助图片来提问，希望你们这些聪明的家伙能给我一些建议。谢谢你阅读我的困境

---

尝试对角线的剪辑路径

---

查看渐变或渐变，谢谢，可以。这对斜线跳水也有帮助吗？

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