如何使用 CSS 中的 clip-path 从椭圆中剪出一个椭圆？

Question

我一直在尝试弄清楚如何使用 clip-path 从 div 中剪出一个圆圈。我创建了一个有点相反的演示，但它并不完全符合我的要求：http://jsfiddle.net/5eedebkn/2/

我无法弄清楚如何在使用省略号时获取 "inset" 剪切区域的剪辑路径。

body    {
    background: rgb(0,0,0);
}

.claw    {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 300px;
    background: rgb(255,255,255);
    border-radius: 50%;
    -webkit-clip-path: circle(90% at -20% -20%);
    clip-path: circle(90% at -20% -20%);
    z-index: 5;
}
.circle    {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 300px;
    background: rgb(35,155,215);
    border-radius: 50%;
    -webkit-clip-path: url(#c1);
}
<div class="claw"></div><div class="circle"></div>

所以白色的部分最终应该被剪掉，这样你就能看到蓝色和黑色的部分。我要切出来的部分是透明的，还得弄圆角

Answer 1

仅当将圆转换为路径时，反转圆才有效。然后在 d 属性中你需要指定两个路径。第一个是覆盖整个圆的矩形：

400x400 像素:

M0,0H400V400H-400z

第二条路径是要切出的圆

M-180,0a200,200 0 1,0 400,0a200,200 0 1,0 -400,0

这个圆从 x=20，y=0 开始，半径为 200 像素。我用在线工具转换了它。

将它放在一起，并将其用作 css:

中的剪辑路径

<svg>
    <defs>
        <clipPath id="circle">
            <path d="M0,0H400V400H-400zM-180,0a200,200 0 1,0 400,0a200,200 0 1,0 -400,0" />
        </clipPath>
    </defs>
</svg>

CSS:

clip-path:url(#circle);

http://jsfiddle.net/5eedebkn/6/

如何使用 CSS 中的 clip-path 从椭圆中剪出一个椭圆？

How do I cut out an ellipse from an ellipse using clip-path in CSS?

css

clip-path