侧面导航栏可滑入对角div

Question

我对对角div非常陌生，需要复制所附的主页和菜单，但我绝对不知道如何做。请有人能指出正确的方向吗？我整天都在搜索它，但是我找不到我真正要问的东西，所以我想在图片的帮助下问一下，希望您能给我一些帮助。感谢您阅读我的困境。

Answer 1

尝试对角线的剪切路径

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%);
}