如何使用CSS制作三维垂直菜单

Question

寻找垂直菜单的一些想法，并在图片中找到了这个例子。如何让它像这样折叠并看3D？

也许有人知道在哪里以及如何使用代码找到类似菜单的真实例子？该网站不再使用该菜单。已经尝试过了。

由于

示例：

Answer 1

尝试使用位置：绝对和转换：倾斜组合

Stack Snippet

＆＃13;

＆＃13;

ul.menu {
  font: 13px Verdana;
  list-style: none;
  padding: 20px 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

ul.menu>li {
  position: relative;
  margin-bottom: 5px;
  padding: 10px;
  background: #808080c4;
  color: #fff;
}

ul.menu>li:before {
  content: "";
  position: absolute;
  width: 40px;
  left: -40px;
  top: 0;
  bottom: 0;
  background: grey;
  transform: skewY(30deg);
  transform-origin: right;
}

ul.menu>li:hover,
ul.menu>li:hover:before {
  background: red;
  cursor: pointer;
}

＆＃13;

<ul class="menu">
  <li>Menu One</li>
  <li>Menu Two</li>
  <li>Menu Three</li>
  <li>Menu Four</li>
  <li>Menu Five</li>
  <li>Menu Six</li>
</ul>

＆＃13;

＆＃13;

＆＃13;