How to Create Circle with Four Quarters

How to create circle with four quarters

Easily...using borders and a rotation.

.circle {  margin: 1em auto;  border-radius: 50%;  width: 40px;  height: 40px;  box-sizing: border-box;  border-width: 20px;  border-style: solid;  border-color: red green blue yellow;  transform: rotate(45deg);}

<div class="circle"></div>

Divide a circle DIV into four sector DIVs

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>

CSS: Circle with four colors and only one div

Since you listed CSS3, you could do this with just borders and a rotation transformation to "fix" the alignment:

div {
    border-radius: 50px;
    border-style: solid;
    border-width: 50px;
    border-bottom-color: red;
    border-left-color: green;
    border-right-color: blue;
    border-top-color: yellow;
    height: 0px;
    width: 0px;

    /* To ratate */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

http://jsfiddle.net/k8Jj9/

How to add click event to each quarter of circle

you can draw your circle like :

<div class="circle">
  <div id="blue" class="quarter" onclick="quarterClicked()"></div>
  <div id="green" class="quarter" onclick="q2()"></div>
  <div id="red" class="quarter" onclick="q3()"></div>
  <div id="black" class="quarter" onclick="q4()"></div>
</div>

css:

.circle {
  display: block;
  padding: 0;
  width: 200px;
  height: 200px;
  border: 1px;
  border-radius: 50%;
  overflow: hidden;
}
.quarter {
  display: inline-block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
}

#blue {
  background-color: blue;
}

#green {
  background-color: green;
}

#red {
  background-color: red;
}

#black {
  background-color: black;
}

javaScript:

quarterClicked(){
    //your code
}

Draw a circle with four segments

html:

<a id="s1"></a>
<a id="s2"></a>
<a id="s3"></a>
<a id="s4"></a>

css:

a{
display:inline-block;
width:50px;
height:50px;
background:green;
}
a:hover{
background:blue;
}
#s1{
position:absolute;
top:0px;
left:0px;
border-top-left-radius:50px;
}
#s2{
position:absolute;
top:0px;
left:50px;
border-top-right-radius:50px;
}
#s3{
position:absolute;
top:50px;
left:0px;
border-bottom-left-radius:50px;
}
#s4{
position:absolute;
top:50px;
left:50px;
border-bottom-right-radius:50px;
}

demo

SVG Draw a circle with 4 sectors

The numbers don't make much sense. You start by moving to (200,200), then draw a straight line to (300,100) (length: 141 units) followed by a circular arc ending at (172.73,227.27) (radius 180 units). Shouldn't the length of the straight line segment at least be equal to the radius of the circle?

You're making life terribly difficult for yourself. If you want to draw four circular segments, a good first step would be to use a <g> element to move the coordinate system to the centre of the circle. Then you can create all four segments using near-identical code.

Here's an example:

<svg width="200" height="200" viewBox="0 0 200 200">  <g transform="translate(100,100)" stroke="#000" stroke-width="2">    <path d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="#f00"/>    <path d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="#080"/>    <path d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="#dd0"/>    <path d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="#04e"/>  </g></svg>

Draw a quarter circle and a line with css

Add extra Corner class to your left_arc and right_arc divs.

That will be shown in this JSBin.

 .text_arc {
    background: none repeat scroll 0 0 #FEEEEA;
    border-top: 1px solid;
    color: #A29061;
    float: left;
    font-family: times new roman;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 1px;
    padding-left: 18px;
    padding-top: 6px;
    text-transform: uppercase;
    width: 100px;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

.left_arc {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}
.right_arc {
    top: -1px;
    left: 110px;
    border-radius: 0 0 0 100%;
    border-width: 0 0 1px 1px;
}

.main_style {
    position: relative;
    margin: 30px;
    width: 119px;
    height: 28px;
    background: #ccc;
    border: 1px solid #333;
}

Divide circle image into 4 slice

This can be done CSS-only :D

You'll make a wrapper containing the four quarters. By setting the border-radius on one corner per quarter, you'll create the circle.
On :hover you can change the size using transform: scale(); and the blur using opacity when .wrapper:hover .quarter.

div.wrapper { position: relative; width: 100px; height: 100px; border-radius: 50px; }div.quarter { position: absolute; width: 50px; height: 50px; background-color: #333; transition: transform .5s, opacity .5s; }div.quarter.left-top { left: 0; top: 0; border-top-left-radius: 50px; }div.quarter.right-top { left: 50px; top: 0; border-top-right-radius: 50px; }div.quarter.left-bottom { left: 0; top: 50px; border-bottom-left-radius: 50px; }div.quarter.right-bottom { left: 50px; top: 50px; border-bottom-right-radius: 50px; }div.wrapper:hover div.quarter { opacity: .5; }div.quarter:hover { opacity: 1 !important; transform: scale(1.5) }

<div class="wrapper">  <div class="quarter left-top"></div>  <div class="quarter right-top"></div>  <div class="quarter left-bottom"></div>  <div class="quarter right-bottom"></div></div>

css: make div rounded circle and add border to the 3/4 of it

Svg circles

Creating a 3/4 of a circle with svg is just a few lines of code:

#cut-circ {  stroke-dasharray: 110;  stroke-dashoffset: 0;}

<svg id="cut-circ" viewBox="0 0 100 100">  <circle cx="50" cy="50" r="23" stroke="red" fill="gray" /></svg>

---

Related Topics