如何制作径向菜单？答案

【问题标题】：How do I make a radial menu?如何制作径向菜单？
【发布时间】：2015-03-31 22:18:34
【问题描述】：

如何使用 HTML 和 CSS 在 Above Link 中创建这个 Button Panel？（白色形状是按钮）

【问题讨论】：

我认为创建label 元素并隐藏按钮本身可能会更好。这样您就可以将多个元素构建到一个可点击区域中，并通过CSS transformations 使用更灵活的方法。长话短说，您所要求的完全有可能，但需要一些思考和实验。严格来说，IMO 这不是可以回答的问题。
不要链接到已经消失的谷歌驱动器文件。

【解决方案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

【讨论】：

【解决方案2】：

我向您推荐这个网站，它包含几个仅使用 border-radius Sweet CSS3 Buttons 的样式按钮

无论您尝试做什么，如果您选择使用按钮/div （而不是画布或 SVG），您还需要使用 css transform whit rotate 和translateY/translateX。大概是这样的：

// Clockwise 
.button2 {
    transform: rotate(45deg) translateY(100px) translateX(-100px);
}
.button3 {
    transform: rotate(90deg) translateY(100px) translateX(-100px);
}
.button4 {
    transform: rotate(135deg) translateY(-100px) translateX(100px);
}
.button5 {
    transform: rotate(45deg) translateY(100px) translateX(-100px);
}

我希望这会有所帮助。问候

【讨论】：