html - 如何使用 CSS 制作 3 维垂直菜单

Question

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

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

谢谢

示例:

Answer 1

尝试使用position: absolute 和transform: skew 组合

堆栈片段

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

<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>