3
Я пытаюсь создать меню угол круга, как показано на рисунке ниже:Corner Circle меню CSS и JQuery
Это то, что я пытался и достиг:
$(".menu").click(function(){
$(".menu-items").fadeToggle();
});html,body{
\t color:#000;
}
.menu{
\t position:fixed;
\t left:-100px;
\t top:-100px;
\t z-index:9999 !important;
\t width:200px;
\t height:200px;
\t border-radius:50%;
\t background-color:#3F51B5;
}
.menu .menu-btn{
\t position:absolute;
\t bottom:50px;
\t right:50px;
}
.menu-items{
\t position:fixed;
\t top:-100;
\t left:-100;
\t z-index:9990 !important;
\t width:250px;
\t height:250px;
\t background:#2979FF;
\t border-radius:50%;
}<html>
<head>
\t <title>Corner Circle Menu</title>
</head>
<body>
\t <div class="menu">
\t \t <div class="menu-btn">Menu</div>
\t </div>
\t <div class="menu-items">
\t \t <div class="menu-item">Item 1</div>
\t \t <div class="menu-item">Item 2</div>
\t \t <div class="menu-item">Item 3</div>
\t </div>
</body>
</html>Я пытался достичь этого с 2 дней, но не смог найти соответствующие коды или идеи или логики. Пожалуйста, может ли кто-нибудь объяснить/направить мне математику и css за этим дизайном?
для поиска «CSS пирога среза» и узнать, как сделать это, а затем просто использовать целые круги и обложите их в верхнем левом углу -> https://jsfiddle.net/d7vvntmk/ – adeneo
Да, это похоже на то, что я искал. Спасибо :) –