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