在HTML/css/script中创建有3个部分的圆圈，并从每个部分执行动作

Create Circle with 3 parts and perform action from each part in HTML/css/script

本文关键字：个部 执行 script css 创建 3个 HTML      更新时间：2023-09-26

我是html设计UI的新手。我有一个要求，根据参考图像设计。我需要相同设计的源代码。请按我说的做。

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

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

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

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

解释:使用rotate，您可以将每个部分放在适当的位置，使用skew，您可以为圆中心创建所需的角度，使用scale，您可以确保这些部分填充圆圈直至边界。最后，你只需要为内圆创建一个元素，你就完成了。

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

参见此题。

.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>

相关文章：