javascript - 用 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 可以为圆心创建所需的 Angular ，使用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>