Question

嘿，我喜欢创建一个看起来像 enter image description here

的css圈子

我在一个类a中使用css border-radius样式创建了圆圈，我按颜色分隔了颜色

我的sass看起来像是圆圈等级

 .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

Circles

现在问题我需要在圆圈的相交区域添加白色，正如我之前描述的那样。有没有可能通过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);
}

使用边框半径的css圆需要更改圆的相交截面的颜色

4 个答案: