圆形菜单隐藏按钮的边缘(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>
更多推荐
发布评论