将圆DIV分成四个扇区DIV

Question

如何在HTML5和CSS3中绘制四个扇区DIV（形成一个圆圈），如上图所示，每个div可以在自己的区域点击（不包括其他区域）？

Answer 1

这是一个如何做到这一点的例子

＆＃13;

＆＃13;

*{
  padding:0;
  margin:0;
}

.circle{
  width:200px;
  height:200px;
  display:flex;
  flex-flow:row wrap;
  transform:rotate(45deg);
}

.circle div{
  height:100px;
  width:100px;
}

.circle div:nth-child(1){
  background-color:red;
  border-radius:100px 0 0 0;
}
.circle div:nth-child(2){
  background-color:green;
  border-radius:0 100px 0 0;
}
.circle div:nth-child(3){
  background-color:yellow;
  border-radius:0 0 0 100px;
}
.circle div:nth-child(4){
  background-color:teal;
  border-radius:0 0 100px 0;
}

＆＃13;

<div class='circle'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助

Answer 2

使用此：

＆＃13;

＆＃13;

.main{
  transform: rotate(45deg);
  margin:100px;
  margin-top: 125px;
}

.parent-div{
    width: 201px;
}

.parent-div div{
width:100px;
height:100px;
display:block; 
    margin: -1px;
    position: relative;
    border: solid 1px;
}


.part1{
border-radius:100% 0 0 0 ;
float:left;
}
.part2{
border-radius: 0 100% 0 0 ;
float:right;
}
.part3{
border-radius:0 0 0 100% ;
float:left;
}
.part4{
border-radius:0 0 100% 0;
float:right;
}

.parent-div div span{
    position: absolute;
    transform: rotate(-45deg);
    font-size: 24px;

}
.parent-div .part1 span{
    top: 45px;
    left: 50px;

}
.parent-div .part2 span{
       top: 50px;
    left: 35px;

}


.parent-div .part3 span{
    top: 30%;
    left: 53%;

}
.parent-div .part4 span{
    top: 31px;
    left: 33px;

}

＆＃13;

<div class="main">
  <div class="parent-div">
      <div class="part1"><span>1</span></div>
      <div class="part2"><span>2</span></div>
    </div>
  <div  class="parent-div">
      <div class="part3"><span>4</span></div>
      <div class="part4"><span>3</span></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;