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

Question

寻找垂直菜单的一些想法，并在图片中找到了此示例。 如何使其折叠并看起来3D？

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

谢谢

范例：

Answer 1

尝试利用位置：绝对和变换：倾斜组合

堆栈片段

 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>