4

嘿，我喜欢创建一个看起来像在此处输入图像描述

我在 a 类中使用 css 边框半径样式创建了圆圈，并按 id 分隔颜色

我的 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

界

现在的问题是我需要在圆圈的相交区域中添加白色，正如我之前通过图像描述的那样。有没有可能的方法来通过 css 获得它？

我的小提琴是

小提琴

4

4 回答 4

4

更简单的版本：小提琴

<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;
}
于 2013-07-16T12:52:03.543 回答
3

演示：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 的回答中获取其余浏览器的属性

于 2013-07-16T11:44:06.167 回答
3

这是一个仅限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);
}
于 2013-07-16T12:21:38.937 回答
3

简短的回答是，您所要求的内容在 CSS中是不可能推荐的。至少，不是以任何明智的方式（考虑到足够的标记，我想一切皆有可能，但这并不是你真正要问的）。

opacity使用;可以稍微接近您的预期结果 使圆圈半透明，它将为重叠的部分提供两种重叠颜色的混合颜色。但这也不是你想要的。

使用 CSS 获得除此之外的任何东西都非常困难，老实说，可能不值得。现代浏览器具有内置的 SVG 等功能，可让您创建丰富的图形效果，因此完全没有理由尝试在 CSS 中做这种事情。只需为此使用 SVG 就可以了。

于 2013-07-16T10:09:25.540 回答