Меню углового круга CSS и jQuery

Я пытаюсь создать меню углового круга, как показано на рисунке ниже:

Пример меню окружного угла

Вот что я пробовал и добился:

$(".menu").click(function(){
    $(".menu-items").fadeToggle();
});
html,body{
	color:#000;
}

.menu{
	position:fixed;
	left:-100px;
	top:-100px;
	z-index:9999 !important;
	width:200px;
	height:200px;
	border-radius:50%;
	background-color:#3F51B5;
}

.menu .menu-btn{
	position:absolute;
	bottom:50px;
	right:50px;
}

.menu-items{
	position:fixed;
	top:-100;
	left:-100;
	z-index:9990 !important;
	width:250px;
	height:250px;
	background:#2979FF;
	border-radius:50%;
}
<html>
<head>
	<title>Corner Circle Menu</title>
</head>
<body>
	<div class="menu">
		<div class="menu-btn">Menu</div>
	</div>
	<div class="menu-items">
		<div class="menu-item">Item 1</div>
		<div class="menu-item">Item 2</div>
		<div class="menu-item">Item 3</div>
	</div>
</body>
</html>

Я пытался добиться этого с 2 дней, но не смог найти никаких соответствующих кодов или идей или логики. Пожалуйста, может ли кто-нибудь объяснить / направить мне математику и css за этим дизайном?

javascript,jquery,html,css,menu,

3