CSS界需要改变界

Question

的相交部分的颜色嘿所有我喜欢以创建CSS圆圈，它看起来像

和我创建使用类中的CSS边界半径风格的圆我通过ID separted颜色

我顶嘴看起来是圆 类

.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的DAT分离的颜色

 #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 only版本。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); 
}