用 3 个部分创建 Circle 并在 HTML/css/script 中从每个部分执行操作

Question

我是用 html 设计 UI 的新手。我需要根据参考图像进行设计。我需要相同设计的源代码。请做必要的事情。

一个圆圈有 3 个部分。点击每个部分都会有一个事件。

https://drive.google.com/file/d/0B8QaA3VryqygYU9valJoYm9WSEU/view?usp=sharing

Answer 1

可以在 CSS 中创建这样一个分段的圆圈。首先，在容器元素上创建带有border-radius: 50%; 的圆圈。比您使用transform 创建细分：

transform: rotate(-60deg) skewY(30deg) scale(1.2);

说明：使用rotate，您可以将每个线段放置在适当的位置，使用skew，您可以为圆心创建所需的角度，使用scale，您可以确保线段填充圆直到边框.最后，您只需为内圈创建一个元素即可。

要使片段可点击，您可以使用onclick 事件处理程序或jQuerys click() 函数。

另见this question。

.pie {
  position: relative;
  margin: 1em auto;
  border: 4px solid black;
  padding: 0;
  width: 15em;
  height: 15em;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  border: 2px solid black;
  box-sizing: border-box;
  
}
.slice-contents {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
}
.slice:nth-child(1) {
  transform: rotate(-60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(1) .slice-contents {
  transform: skewY(-30deg); /* unskew slice contents */
    background: lightblue;
}
.slice:nth-child(2) {
  transform: rotate(60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(2) .slice-contents {
  transform: skewY(-30deg); /* unskew slice contents */
    background: lightgreen;
}
.slice:nth-child(3) {
  transform: rotate(180deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(3) .slice-contents {
  transform: skewY(-30deg); /* unskew slice contents */
    background: orange;
}
.inner-pie {
  position: absolute;
  width: 3em;
  height: 3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
    border: 4px solid black;
  background: white;
}

<ul class='pie'>
  <li class='slice'>
    <div class='slice-contents'>click 1</div>
  </li>
  <li class='slice'>
    <div class='slice-contents'>click 2</div>
  </li>
  <li class='slice'>
    <div class='slice-contents'>click 3</div>
  </li>
  <li class='inner-pie'>
  </li>
<ul>