Css circles using border radius should change color of intersected circles section

Question

Hi everyone, I like to create css circles that look like

and I created circles using styles with border-radius borders in class a and i, dividing the colors by id

my sass looks like a class for a circle

.works_section{ margin-top: 80px; .work_circles{ float: left; width: 201px; height: 201px; border-radius: 101px; display: block; position: relative; img{ display: block; margin: 0 auto; margin-top: 65px; } p{ margin-top: 15px; color: white; text-align: center; font-weight: bold; } } 

// id that shares colors

  #firstblu_circle{ @extend .work_circles; background-color:$blue; z-index: 1; } #yello_circle{ @extend .work_circles; background-color:$pale_yello; z-index: 2; left: -21px; } #radiumgreen_circle{ @extend .work_circles; background-color:$green; z-index: 1; left: -42px; } #pink_circle{ @extend .work_circles; background-color:$pnk; z-index: 2; left: -63px; } #lastblu_circle{ @extend .work_circles; background-color:$del_blue; z-index: 1; margin-left: -82px; } } And circle is look like 

Now I need to add white to the intersected areas of the circle, as I described the image before. Is there any possible way to get it using css?

myfiddle -

fiddle

Answer 1

A slightly simpler version: Fiddle

 <div class='circle-holder'> <div id='circle-1' class='circle'></div> <div id='circle-2' class='circle'></div> <div id='circle-3' class='circle'></div> <div id='circle-4' class='circle'></div> <div id='circle-5' class='circle'></div> </div> 

CSS

 .circle { width: 201px; height: 201px; border-radius: 101px; float: left; position: relative; overflow: hidden; margin-right: -30px; } .circle + .circle::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -170px; background: #fff; border-radius: 101px; } 

Answer 2

Short answer: what you ask is not recommended in CSS. At least in no common sense (given enough markup, I think that everything is possible, but that’s not quite what you are asking for).

You can get closer to your intended result using opacity ; make the circles translucent and this will give the overlapping segments a mixed color of two overlapping colors. But that is not what you want.

To get anything besides this using CSS will be extremely difficult, and frankly, it may not be worth it. Modern browsers have features such as the SVG built into them, which allows you to create rich graphical effects, so there’s no reason to try to do such things in CSS at all. Just use SVG for this and everything will be fine.

Answer 3

DEMO: http://jsfiddle.net/Rfnca/7/

HTML

  <div id="main"> <span class="works_section" id="upload_circle"> </span> <span class="works_section" id="team_circle"> </span> <span class="works_section" id="development_circle"> </span> <span class="works_section" id="testing_circle"> </span> </div> 

CSS

 .works_section{ float: left; width: 100px; height: 100px; border-radius: 101px; display: block; position: relative; } #upload_circle { background-color: #25aed2; z-index: 0; } #team_circle { background-color: white; z-index: 1; left: -21px; background-image: -moz-radial-gradient( -37px 50%, /* the -37px left position varies by your "gap" */ circle closest-corner, /* keep radius to half height */ transparent 0, /* transparent at center */ transparent 55px, /*transparent at edge of gap */ #f1ce0d 56px, /* start circle "border" */ #f1ce0d 57px /* end circle border and begin color of rest of background */ ); } #development_circle { background-color: #fff; z-index: 1; left: -42px; background-image: -moz-radial-gradient( -37px 50%, /* the -37px left position varies by your "gap" */ circle closest-corner, /* keep radius to half height */ transparent 0, /* transparent at center */ transparent 55px, /*transparent at edge of gap */ #26e489 56px, /* start circle "border" */ #26e489 57px /* end circle border and begin color of rest of background */ ); } #testing_circle { background-color: #fff; z-index: 2; left: -63px; background-image: -moz-radial-gradient( -37px 50%, /* the -37px left position varies by your "gap" */ circle closest-corner, /* keep radius to half height */ transparent 0, /* transparent at center */ transparent 55px, /*transparent at edge of gap */ #EC1A5F 56px, /* start circle "border" */ #EC1A5F 57px /* end circle border and begin color of rest of background */ ); } 

Credits to Scotts for his answer to this question: CSS 3 Shape: Inverse Circle or Cut Circle

I just used its code with some changes.

I just added a property for firefox. You can get properties for other browsers from scotts answer

Answer 4

Here is only the FF version. I will write a generalized version if someone likes it: http://jsfiddle.net/z3VXw/

 <div class='circle-holder'> <div id='circle-1' class='circle'></div> <div id='circle-2' class='circle'></div> <div id='circle-3' class='circle'></div> <div id='circle-4' class='circle'></div> <div id='circle-5' class='circle'></div> </div> <svg id="svg-defs"> <defs> <clipPath id="clip-bite-left"> <path d="M0,30 L0,0 L202,0 L202,202 L0,202 L0,170 A101,101 0 0,0 0,30 "/> </clipPath> <clipPath id="clip-bite-right"> <path d="M202,30 L202,0 L0,0 L0,202 L202,202 L202,170 A101,101 0 0,1 202,30 "/> </clipPath> <clipPath id="clip-bite-both"> <path d="M0,30 L0,0 L202,0 L202,30 A101,101 0 0,0 202,170 L202,202 L0,202 L0,170 A101,101 0 0,0 0,30 "/> </clipPath> </defs> </svg> 

CSS

 .circle-holder { width: 1200px; } .circle { _float: left; width: 201px; height: 201px; border-radius: 101px; display: inline-block; position: relative; } #circle-1 { background-color:#25AED2; } #circle-2 { background-color:#F1CE0D; left: -30px; } #circle-3 { background-color:#26E489; left: -60px; } #circle-4 { background-color:#EC1A5F; left: -90px; } #circle-5 { background-color:#25C8D2; left: -120px; } #circle-1 { clip-path: url(#clip-bite-right); } #circle-2, #circle-3, #circle-4 { clip-path: url(#clip-bite-both); } #circle-5 { clip-path: url(#clip-bite-left); }