如何制作放射状菜单？

Question

Button Panel

如何使用 HTML ＆amp;＆gt;在以上链接中创建按钮面板的 CSS ？ （白色形状是按钮）

Answer 1

您可以尝试定位它们。但是，只有当您知道要使用多少链接时，这才真正有效。否则，如果您使用动态/未知数量的链接

，则javascript方法会更有用

div{
  display:inline-block;
  height:300px;
  width:300px;
  background:rgba(0,0,0,0.2);
  border-radius:50%;
  position:relative;
  overflow:hidden;
  border:10px solid black;
  }
div:before{
  content:"";
  position:absolute;
  height:70%;
  width:70%;
  border-radius:50%;
  background:black;
  top:15%;
  left:15%;
  z-index:8;
  }
div a {
  position:absolute;
  padding:20px;
  background:tomato;
  padding-bottom:50px;
  }
div a:nth-child(1){
  bottom:-10%;
  left:50%;
  transform:translateX(-50%);
  }
div a:nth-child(2){
  bottom:10%;
  left:10%;
  transform:translateX(-50%) rotate(55deg);
  }
div a:nth-child(3){
  bottom:10%;
  left:90%;
  transform:translateX(-50%) rotate(-55deg);
  }

div a:hover{
  background:cornflowerblue;

<div>
  <a href="#">Lnk</a>
  <a href="#">Lnk</a>
  <a href="#">Lnk</a>
</div>

注意

你也可以尝试使用透视，虽然我认为js会是一个更好的选择

• SCSS solution

Answer 2

我建议您使用border-radius Sweet CSS3 Buttons

这个包含多个样式按钮的网站

无论你想要做什么，如果你选择使用按钮/ div （而不是画布或SVG）你还需要使用css transform whit {{ 1}}和rotate / translateY。 可能是这样的：

translateX

我希望这会有所帮助。 此致