javascript - 将一个圆DIV分成四个扇形DIV

Question

<分区>

Answer 1

使用这个:

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

}

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