圆形菜单隐藏按钮的边缘(circle menu hide edges of buttons)
我想创建一个菜单,就像一个带有4个按钮的圆圈。 他们不应该走出圈子,但我不知道如何阻止他们这样做。
这是我到目前为止所做的:
蓝色方块是悬停时显示的按钮。 如您所见,右下边缘位于圆圈之外。 如何切割边缘以使其不会到达外面?
样式:
body{ background: "#EEE"; width: 100%; height: 100%; } .start-menu{ width: 300px; height: 300px; background-color: black; border-radius: 200px; } .menu-buttons{ width: 100%; height: 100%; } .menu-buttons .button{ background: blue; height: 50%; width: 50%; float: left; opacity: 0 } .menu-buttons .button:hover{ opacity: 1; } <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>Responsive Test</title> <link rel="stylesheet" href="styles/style.css"> <!-- <script src="js/menu.js"></script> --> </head> <body> <div class="start-menu"> <div class="menu-buttons"> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> </div> </div> </body> </html>I want to create a menu like a circle with 4 buttons in it. They should not go outside of the circle but i don't know how to prevent them from doing that.
This is what i have made so far:
The blue square is the button which show on hover. As you can see the right bottom edge is outside of the circle. How can i do to cut the edge so that it won't reache outside?
style:
body{ background: "#EEE"; width: 100%; height: 100%; } .start-menu{ width: 300px; height: 300px; background-color: black; border-radius: 200px; } .menu-buttons{ width: 100%; height: 100%; } .menu-buttons .button{ background: blue; height: 50%; width: 50%; float: left; opacity: 0 } .menu-buttons .button:hover{ opacity: 1; } <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>Responsive Test</title> <link rel="stylesheet" href="styles/style.css"> <!-- <script src="js/menu.js"></script> --> </head> <body> <div class="start-menu"> <div class="menu-buttons"> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> </div> </div> </body> </html>最满意答案
使用overflow: hidden在.start-menu :
.start-menu { width: 300px; height: 300px; background-color: black; border-radius: 200px; overflow: hidden; }body { background: "#EEE"; width: 100%; height: 100%; } .start-menu { width: 300px; height: 300px; background-color: black; border-radius: 200px; overflow: hidden; } .menu-buttons { width: 100%; height: 100%; } .menu-buttons .button { background: blue; height: 50%; width: 50%; float: left; opacity: 0 } .menu-buttons .button:hover { opacity: 1; }<div class="start-menu"> <div class="menu-buttons"> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> </div> </div>Use overflow: hidden on the .start-menu:
.start-menu { width: 300px; height: 300px; background-color: black; border-radius: 200px; overflow: hidden; }body { background: "#EEE"; width: 100%; height: 100%; } .start-menu { width: 300px; height: 300px; background-color: black; border-radius: 200px; overflow: hidden; } .menu-buttons { width: 100%; height: 100%; } .menu-buttons .button { background: blue; height: 50%; width: 50%; float: left; opacity: 0 } .menu-buttons .button:hover { opacity: 1; }<div class="start-menu"> <div class="menu-buttons"> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> <div class="button"> </div> </div> </div>
更多推荐
发布评论