Multi-Coloured Circular Div Using Background Colours

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>

CSS: Circle with half one color and the other half another color?

A linear-gradient will do that, and use border-radius to make it a circle.

div {  width: 50vw;  height: 50vw;  background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% );   border-radius: 50%;}

<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 do I put a multi color border around my circular image?

Here's an example using a little more markup and pseudo elements:

.image-wrap {  position: relative;  padding: 6px;  border-radius: 50%;  width: 140px;  height: 140px;  box-sizing: border-box;  overflow: hidden;  background: blue;  z-index: 1;  background-clip: padding-box;}
.image-wrap-inner {  overflow: hidden;  border-radius: 50%;  width: 128px;  height: 128px;}
.image-wrap img {  position: relative;  z-index: 10;  top: -6px;  left: -6px;}
.img-border-two::before {  content: '';  display: block;  height: 140px;  width: 140px;  background: green;  position: absolute;  top: 0;  left: 70px;  z-index: 2;}
.img-border-three::before {  content: '';  display: block;  height: 140px;  width: 140px;  background: purple;  position: absolute;  top: 0;  left: 0;  z-index: 3;  transform: matrix(2, 1, 2, -1, 0, 140);}
.img-border-three::after {  content: '';  display: block;  height: 140px;  width: 140px;  background: red;  position: absolute;  top: 0;  left: 70px;  z-index: 2;}

<div class="col-lg-4">  <div class="image-wrap img-border-two">    <div class="image-wrap-inner">      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">    </div>  </div>
  <h2>Heading</h2>  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>

<div class="col-lg-4">  <div class="image-wrap img-border-three">    <div class="image-wrap-inner">      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">    </div>  </div>
  <h2>Heading</h2>  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>

How to segment a circle with different colors using CSS

The cross-browser solution:

JSFiddle

.circle {    border-radius: 50%;    background: gray;    width: 300px;    height: 300px;    overflow: hidden;}.segment {    float: left;    width: 10%;    height: 100%;}    .segment_1 {        background: red;    }    .segment_2 {        background: green;    }    .segment_3 {        background: yellow;    }    .segment_4 {        background: blue;    }

<div class="circle">    <div class="segment segment_1"></div>    <div class="segment segment_2"></div>    <div class="segment segment_3"></div>    <div class="segment segment_4"></div></div>

Create a two color circle

Here is a working snippet of what I'll do, using border:

• % values instead of px for border-radius, it simplifies a lot!
• border-color to add the correct color for each side.
• transform: rotate(45deg); to turn it like you want.

body{  background: #ccc;}
.halves-circle{  background: #fff;  height: 200px;  width: 200px;  border: 20px solid;  border-radius: 50%;  border-color: green green red red;  transform: rotate(45deg);}

<div class="halves-circle">

---

Related Topics