css circles using border radius need to change the color of intersected section of circles

css, svg

Solution

A bit 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;
}

Problem

Hey all i like to create a css circles which looks like and i created the circles using css border-radius styles within a class a and i separted the colors by id my sass looks like is class for 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's dat separate the 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 the problem i need to add white color in the intersected areas of the circle as i described by image earlier.is there any possible way to get it by css? myfiddle is fiddle

Original source

Related problems