如何使用 HTML5 和 CSS 3 围绕圆形放置按钮？答案

【问题标题】：How To Place Buttons Around A Circle with HTML5 and CSS 3?如何使用 HTML5 和 CSS 3 围绕圆形放置按钮？
【发布时间】：2015-06-23 00:39:44
【问题描述】：

我想在一个圆圈周围排列 4 个按钮（或引导选项卡，没关系）并在该圆圈的中间加载内容，如下所示：

我该怎么做？

【问题讨论】：

您好，能否请您添加一些您尝试过的代码 sn-ps，以便其他人可以帮助或改进您的代码。
@sankoobaba 你是对的，但我不知道我可以用 html 5 中的画布做什么以及如何在它周围制作曲线按钮。
@AlirezaHafez 你需要探索 SVG 文件和 HTML5 Canvas 标签。搜索搜索引擎或在 StackOverflow 上搜索，看看有什么可以帮助您处理这些术语，
我的 2 美分：如果这不仅仅是一项一次性任务，那么 SVG 非常适合您的弧形标签。您可以在 SVG 中定义每个弧。您甚至可以塑造标签标签文本以跟随弧线。由于 SVG 是一个真正的 DOM 元素，您会自动获得悬停和点击功能。 SVG 有一个学习曲线，但一旦学会了它是一个有用且灵活的工具来显示“四四方方” div 以外的形状。 ;-)

标签： html css html5-canvas css-shapes

【解决方案1】：

您可以使用一点点 jquery 来为您的中心圆加载您想要的文本。

$(document).ready(function() {
  $('.quart').click(function() {
    var ind = $(this).index();
    switch (ind) {
      case 0:
        var tex = "div 1";
        break;
      case 1:
        var tex = "div 2";
        break;
      case 2:
        var tex = "div 3";
        break;
      case 3:
        var tex = "div 4";
        break;
    }
    $('.center').text(tex);
  });

});

.wrap {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.quart {
  position: absolute;
  height: 50%;
  width: 50%;
  background: tomato;
  transition: all 0.4s;
}
.quart:first-child {
  top: 0;
  left: 0;
}
.quart:nth-child(2) {
  top: 0;
  left: 50%;
}
.quart:nth-child(3) {
  top: 50%;
  left: 0;
}
.quart:nth-child(4) {
  top: 50%;
  left: 50%;
}
.center {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  background: lightgray;
  border-radius: 50%;
  text-align: center;
  line-height: 160px;
}
.quart:hover {
  background: dimgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="quart"></div>
  <div class="quart"></div>
  <div class="quart"></div>
  <div class="quart"></div>
  <div class="center">Click My non-existent Corners!</div>
</div>

这可能不如 svg 解决方案高效，但可以根据您的需要进行更改。

【讨论】：

【解决方案2】：

您可以使用 HTML <map> 标签 - more info

【讨论】：

映射图像是个好主意，但我也想在按钮和圆圈中间加载动态内容！
地图标签不适合动态内容并且不能缩放到内容，地图通常用于图像，在这种情况下，最好使用 SVG 文件来处理整个事情，而不是有些过时（非移动友好）<map> 标签。