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

Question

Hey all i like to create a css circles which looks like enter image description here

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

Circles

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

I think you're using the wrong tool for the job. This would be dead easy using SVG; why are you making it difficult for yourself by trying to hack it in CSS? — Spudley, Jul 16 '13 at 10:03
I've posted my comment as an answer, with a bit more detail. — Spudley, Jul 16 '13 at 10:09

score 4 · Accepted Answer · edited Aug 15 '13 at 20:52

4

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

edited Aug 15 '13 at 20:52

Vivek Vikranth

3,265
2
21
34

answered Jul 16 '13 at 12:52

Ilya Streltsyn

13,076
2
37
57

This is so similar to @DonDay's solution. – Clyde Lobo Jul 16 '13 at 15:45
Yes, I even used the same markup:), but my goal was to achieve the visual effect without such exotic (by now) features like `clip-path`. I intended to use the traditional CSS as much as possible (the only part of CSS3 here is `border-radius`). Also, I prefer floats to inline-blocks in such cases because they don't require [fighting the spaces between them](http://css-tricks.com/fighting-the-space-between-inline-block-elements/). However, I've learnt much from his solution and upvoted it. – Ilya Streltsyn Jul 16 '13 at 16:07
Using other people's fiddles as a starting point is accepted practice. I used VIVEk's code as a starting point. I don't see a problem. Plus this answer is all clean and tidy and stuff. – Dom Day Jul 17 '13 at 07:20
@DomDay : Agreed, but in such cases I'd prefer people giving credit to the original code that they used. :) – Clyde Lobo Jul 18 '13 at 14:03
@IlyaStreltsyn But this hack seem's to be not working clearly in Safari browsers. – Vivek Vikranth Aug 07 '13 at 11:25
1

@VIVEkUI, yes, unfortunately it appears to be a bug with `border-radius` clipping in older WebKit browsers like Safari 5-. But browsers based on newer WebKit builds should display it correctly. – Ilya Streltsyn Aug 07 '13 at 20:42

Spudley · Answer 2 · 2013-07-17T06:41:12.700

3

The short answer is that what you're asking for isn't ~~possible~~ recommended in CSS. At least, not in any sensible way (given enough markup, I guess anything is possible, but that's not really what you're asking).

It is possible to get slightly closer to your intended result by using opacity; make the circles semi-transparent, and it will give the overlapping segments a blended colour from the two overlapping colours. But that's not what you want either.

To get anything beyond that using CSS will be extremely difficult, and to be honest, probably not worth it. Modern browsers have features like SVG built into them which allow you to create rich graphic effects, so there's really no reason to be trying to do this kind of thing in CSS at all. Just use SVG for this and you'll be fine.

edited Jul 17 '13 at 06:41

answered Jul 16 '13 at 10:09

Spudley

166,037
39
233
307

Umh... take a look at the other answers... ok, they're hacks, but so is life ;) – Andrea Ligios Jul 16 '13 at 14:26
2

I stand corrected. It is possible. Not sensible perhaps, but possible. :) I would still maintain that CSS is the wrong tool for this: The problem is that even having got what he wants, if he then decides he wants to modify it slightly, it's always going to be a battle fighting with the language to get it to comply. We've got SVG, and it is designed explicitly for this kind of thing; it does it really well, very easily, and simple to work with, so why not use it? (and it's supported in all browsers that have `border-radius`, so he doesn't even have that as an excuse) – Spudley Jul 16 '13 at 19:54
1

I totally agree; I would still change from "isn't possible in pure CSS" to "isn't recommended in pure CSS" in your first sentence... just my 2 (humble) cents – Andrea Ligios Jul 16 '13 at 23:24

score 3 · Answer 3 · edited May 23 '17 at 12:24

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 Out Circle"

I just used his code with some modifications.

I have just added the property for firefox. You can get the properties for the rest of the browsers from scotts's answer

Dom Day · Answer 4 · 2013-07-16T12:41:57.677

Here's a FF only version. I'll post a generalized version if anyone cares: 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);
}

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

4 Answers4