Css: Circle with Four Colors and Only One 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 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>

Multi-coloured circular div using background colours?

You can make this with using borders:

.chart {  position: absolute;  width: 0;  height: 0;  border-radius: 60px;  -moz-border-radius: 60px;  -webkit-border-radius: 60px;}
#chart1 {  border-right: 60px solid red;  border-top: 60px solid transparent;  border-left: 60px solid transparent;  border-bottom: 60px solid transparent;}
#chart2 {  border-right: 60px solid transparent;  border-top: 60px solid green;  border-left: 60px solid transparent;  border-bottom: 60px solid transparent;}
#chart3 {  border-right: 60px solid transparent;  border-top: 60px solid transparent;  border-left: 60px solid blue;  border-bottom: 60px solid transparent;}
#chart4 {  border-right: 60px solid transparent;  border-top: 60px solid transparent;  border-left: 60px solid transparent;  border-bottom: 60px solid yellow;}

<div id="chart1" class="chart"></div><div id="chart2" class="chart"></div><div id="chart3" class="chart"></div><div id="chart4" class="chart"></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>

Changing the border colour of 4 circles one after the other?

You can do this with just css animations. First create animation of 4s duration that sets border-color to blue for 1s or 25% of time of those 4 seconds and the rest of animation returns border-color to gray or 75% of full animation time. Now you just need to use animation-delay on each circle so that animation on one circle starts after 1s when color from previous circle has changed to gray.

.circles {  position: relative;  min-height: 100vh;}.circle {  border-radius: 50%;  border: 10px solid gray;  display: inline-block;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  animation-duration: 4s;  animation-name: changeColor;  animation-iteration-count: infinite;}.c1 {  height: 300px;  width: 300px;}.c2 {  height: 250px;  width: 250px;  animation-delay: 1s;}.c3 {  height: 200px;  width: 200px;  animation-delay: 2s;}.c4 {  height: 150px;  width: 150px;  animation-delay: 3s;}
@keyframes changeColor {  0% {    border-color: #1C50A8;  }  24% {    border-color: #1C50A8;  }  25% {    border-color: gray;  }  100% {    border-color: gray;  }}

<div class="circles">  <div class="circle c1">    <div class="circle c2">      <div class="circle c3">        <div class="circle c4"></div>      </div>    </div>  </div></div>

Segments in a circle using CSS3

Yes, you can get such slices of custom angles using either one of the following two methods:

1. If you don't need the slices to be elements themselves, the you can simply do it with one element and linear gradients - see this rainbow wheel I did last month.
2. If you need the slices to be elements themselves, then you can do it by chaining rotate and skew transforms - see this circular menu I did a while ago.

For #2, see also this very much simplified example I did right now.

.pie {
  overflow:hidden;
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em; height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%; 
}
.slice:first-child {
  transform: rotate(15deg) skewY(-22.5deg);
}
.slice-contents {
  position: absolute;
  left: -100%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: lightblue;
}
.slice:first-child .slice-contents {
  transform: skewY(22.5deg); /* unskew slice contents */
}
.slice:hover .slice-contents { background: violet; } /* highlight on hover */

<ul class='pie'>
  <li class='slice'>
    <div class='slice-contents'></div>
  </li>
  <!-- you can add more slices here -->
</ul>

Css circle with border that is hollow inside?

You can use poiner-events: none to delegate clicks and hovers to covered elements.
This works for all major browsers and for IE since version 11.

.inner-circle{  display: inline-block;  width: 50px;  height: 50px;  border-radius: 50%;  border-style: solid;  border-width: 2px;  border-color: blue;  background-color: rgba(0, 0, 0, 0);  position: absolute;  top:0;  left:0;  pointer-events:none;}

<input type="checkbox" /><span class="inner-circle"></span>

I can't make the 3/4 circle and i have to use one div only so how can i make it as the example in the link below

As you are constrained to use just one div, this snippet builds on your idea of having the pseudo elements but creating them with conic-gradient backgrounds and the 'main' div having the light gray circular background created using a radial gradient. That way it creates these 3 shapes.

and overlays them to give the impression of 3/4 circles. It then uses CSS animation to rotate them on hover.

Obviously you will want to play with the dimensions, the animations timings and directions to get exactly what you want but this should give a start.

* {
  box-sizing: border-box;
}

div {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(#eee 0 55%, transparent 55% 100%);
  margin: 80px auto;
  color: black;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  border-radius: 50%;
  position: relative;
}

div::after {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background-image: conic-gradient(#03a9f4 0deg 45deg, white 45deg 135deg, #03a9f4 135deg 360deg);
}

div::before {
  content: "";
  width: calc(100% - 10%);
  height: calc(100% - 10%);
  position: absolute;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: -1;
  background-image: conic-gradient(#e91e63 0, #e91e63 225deg, white 225deg, white 315deg, #e91e63 315deg, #e91e63 360deg);
}

div:hover::after {
  animation: rot .4s linear;
}

div:hover::before {
  animation: rot .4s linear;
  animation-delay: .1s;
  animation-direction: reverse;
}

@keyframes rot {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(0);
  }
  100% {}
}

<div>Elzero
</div>

---

Related Topics