如何用HTML、CSS或JavaScript实现特定布局的环形菜单？

我想用纯HTML、CSS或JavaScript制作一个菜单，尝试过通过修改容器边框的方式实现，但没得到理想效果。我对HTML/CSS不太精通，期望做出类似弧形侧边的菜单样式，希望有人能提供帮助。

目前我写出的最接近预期效果的代码如下，但没法继续推进，而且这个方案并不理想——我需要把元素对齐边缘，不知道怎么达成示例中的效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic path</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .half-circle {
            width: 100px;
            height: 200px;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            border: 10px solid gray;
            border-right: 0;

            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="half-circle"></div>
</body>
</html>

内容的提问来源于stack exchange，提问作者LearningProgramming0x1