使用CSS3将Circle分为三个部分

Question

我正在研究圈子我希望将圈子划分为3个部分，如附加图像

每个部分都是可点击的，我使用的是HTML5，CSS3和jQuery，是否可以将圆圈分成3个部分？

＆＃13;

＆＃13;

.circle {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
li {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}
.text {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  text-align: center;
  transform: skewY(-60deg) rotate(15deg);
  padding-top: 20px;
}
li:first-child {
  transform: rotate(0deg) skewY(30deg);
}
li:nth-child(2) {
  transform: rotate(120deg) skewY(30deg);
}
li:nth-child(3) {
  transform: rotate(240deg) skewY(30deg);
}
li:first-child .text {
  background: green;
}
li:nth-child(2) .text {
  background: tomato;
}
li:nth-child(3) .text {
  background: aqua;
}

＆＃13;

<ul class="circle">
  <li>
    <div class="text">1</div>
  </li>
  <li>
    <div class="text">2</div>
  </li>
  <li>
    <div class="text">3</div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

希望这段代码可以帮到你一点点。也许用jQuery尝试悬停。

＆＃13;

＆＃13;

.circle-outer {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
.circle {
  position: absolute;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
  left: -70px;
  top: -95px;
}
li {
  
}
li .background {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}
.content {
  position: absolute;
  z-index: 30;
  text-align: center;
  width: 200px;
}
.content .icon {
  font-size: 80px;
  color: #000;
}
.content.first {
  left: 15%;
  top: 30%;
}
.content.second {
  right: 15%;
  top: 30%
}
.content.third {
  bottom: 15%;
  left: 32%
}
li:first-child .background {
  transform: rotate(0deg) skewY(30deg);
}
li:nth-child(2) .background {
  transform: rotate(120deg) skewY(30deg);
}
li:nth-child(3) .background {
  transform: rotate(240deg) skewY(30deg);
}
li:first-child .background {
  background: green;
}
li:nth-child(2) .background {
  background: tomato;
}
li:nth-child(3) .background {
  background: aqua;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<div class="circle-outer">

  <ul class="circle">
    <li>
      <a href="#">
        <div class="content first">
          <div class="icon">
            <div class="fa fa-search"></div>
          </div>
          <p>Text</p>
        </div>
        <div class="background"></div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="content second">
          <div class="icon">
            <div class="fa fa-search"></div>
          </div>
          <p>Text</p>
        </div>
        <div class="background"></div>
      </a>
    </li>
        <li>
      <a href="#">
        <div class="content third">
          <div class="icon">
            <div class="fa fa-search"></div>
          </div>
          <p>Text</p>
        </div>
        <div class="background"></div>
      </a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查我的回答：

＆＃13;

＆＃13;

.circle {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
li {
  overflow: hidden;
  position: absolute;
  top: -20%;
  right: -20%;
  width: 70%;
  height: 70%;
  transform-origin: 0% 100%;
}
.text {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  text-align: center;
  transform: skewY(-60deg) rotate(15deg);
  padding-top: 20px;
}
li:first-child {
  transform: rotate(0deg) skewY(30deg);
}
li:nth-child(2) {
  transform: rotate(120deg) skewY(30deg);
}
li:nth-child(3) {
  transform: rotate(240deg) skewY(30deg);
}
li:first-child .text {
  background: green;
}
li:nth-child(2) .text {
  background: tomato;
}
li:nth-child(3) .text {
  background: aqua;
}

＆＃13;

<ul class="circle">
  <li>
    <div class="text">1</div>
  </li>
  <li>
    <div class="text">2</div>
  </li>
  <li>
    <div class="text">3</div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;