CSS кругов с использованием радиуса границы необходимо изменить цвет пересеченной части кругов

Question

Привет всем я хотел бы создать КАС круги, которые выглядят как

и я создал круги с помощью CSS стилей границы радиуса в пределах класса А и я отдел юта цвета по идентификатору

моя дерзость выглядит это класса для окружности

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

// идентификаторов Даты отделят цветы

 #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 

Теперь проблема, мне нужно, чтобы добавить белый цвет в пересеченных участках окружности, как я описываемого изображения earlier.is там любой возможный способ получить его CSS?

myfiddle является

fiddle

Answer 1

Немного простой вариант: 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

Короткий ответ, что вы просите не возможно рекомендуется в CSS. По крайней мере, ни в каком здравом смысле (учитывая достаточную разметку, я думаю, ничего, возможно, но на самом деле это не то, что вы просите).

Можно приблизиться к вашему предполагаемому результату, используя opacity; сделайте круги полупрозрачными, и это придаст перекрывающимся сегментам смешанный цвет из двух перекрывающихся цветов. Но это не то, что вы хотите.

Чтобы получить что-либо помимо этого, используя CSS, будет чрезвычайно сложно, и, честно говоря, вероятно, этого не стоит. У современных браузеров есть такие функции, как SVG, встроенные в них, которые позволяют создавать богатые графические эффекты, поэтому нет причин вообще пытаться делать подобные вещи в CSS. Просто используйте SVG для этого, и все будет в порядке.

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 */ 
    ); 

} 

Кредиты Scotts для его ответа на этот вопрос: CSS 3 Shape: "Inverse Circle" or "Cut Out Circle"

Я просто использовал свой код с некоторыми изменениями ,

Я только что добавил объект для firefox. Вы можете получить свойства для остальных браузеров из ответа scotts

Answer 4

Вот версия FF.Я выложу обобщенную версию, если кто-то заботится: 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); 
}