CSS左上角四分之一圆圈菜单

Question

我一直在尝试使用CSS转换制作左上角的四分之一圆菜单，这是我的HTML：

<header>
    <ul>
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
    </ul>
</header>

似乎至少有三件或更多的东西必须同时完成，而我只是粗略了。我的目标是尽可能使菜单匹配黑色header元素的区域。

https://jsfiddle.net/8axqpen4/