Divide a circle DIV into four sector DIVs

Question

How can I draw four sector DIVs (forming a circle) in HTML5 and CSS3 like the above figure and each div is clickable on its own area (not covering others)?

Why DIVs? It is not the first thing that comes to mind when I think about circles. — KIKO Software, Feb 28 '18 at 09:09
@KIKOSoftware I'm going to write some JS code on the DIVs, and the contents inside those DIVs should be styled with CSS. — KF Lin, Feb 28 '18 at 09:16
another fiddle - https://jsfiddle.net/8twLp9jp/ - this one has the labels upright :p — Jaromanda X, Feb 28 '18 at 09:23

score 2 · Answer 1 · answered Feb 28 '18 at 09:12

Here is an example of how you could do that

*{
  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;
}

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

Hope that helps

your labels are ... interesting – Jaromanda X Feb 28 '18 at 09:23 — Jaromanda X, Feb 28 '18 at 09:23

Saeed Ahmadian · Accepted Answer · 2018-02-28T09:38:29.253

Use this:

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

Divide a circle DIV into four sector DIVs

2 Answers2