Question

我想创建一个带有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>

Answer 1

在overflow: hidden上使用.start-menu：

.start-menu {
  width: 300px;
  height: 300px;
  background-color: black;
  border-radius: 200px;
  overflow: hidden;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我想你想要这样的东西

<div class="outerCircle">
    <div class="btnUpper">
        <button class="btn">b1</button>
    </div>
    <div class="btnUpper">
        <button class="btn">b2</button>
    </div>
    <div class="btnLower">
        <button class="btn">b3</button>
    </div>
    <div class="btnLower">
        <button class="btn">b4</button>
    </div>
</div>

样式表

.btnUpper{
    padding-left: 28px;
    display: inline-block;
    margin-top: 45px;
}
.btnLower{
    padding-left: 28px;
    display: inline-block;  
    margin-top: 20px;   
}
.outerCircle{
    background-color: blue;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    position: absolute;
}

圆形菜单隐藏按钮的边缘

2 个答案: