CSS3 月蚀形状答案

【问题标题】：CSS3 Moon Eclipse shapeCSS3 月蚀形状
【发布时间】：2014-01-05 00:48:46
【问题描述】：

如何在 CSS3 中制作以下形状，而不使用像 ":before" 这样的伪类？

我用 :before 很容易做到，但问题是我不想在灰色区域有一个实心元素（请参阅 JSFiddle - http://jsfiddle.net/aUdLr/2/）

div{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 100%;
    position: relative;
}
div:before{
    content: "";
    width: 100%;
    height: 110%;
    background: gray;
    position: absolute;
    left: 5px;
    top: -5%;
    border-radius: 100%;
}

【问题讨论】：

This website 可能会对您有所帮助。不过，您的形状没有示例。
这也可能有帮助：Flexible Google-style loader with CSS

标签： html css shape css-shapes pseudo-class

【解决方案1】：

要获得小圆被大圆遮盖的效果，您可以为透明元素添加阴影：

div{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color:transparent;
    box-shadow: -23px 0 0px -15px #ff8;
}

示例：http://jsfiddle.net/aUdLr/6/

【讨论】：

具有多个阴影的示例：jsfiddle.net/aUdLr/7，jsfiddle.net/aUdLr/8。这很有趣。
另一种选择是使用阴影 inset: jsfiddle.net/aUdLr/9 。我很确定你可以通过稍微玩一下数字来得到你需要的东西。

【解决方案2】：

你可以使用边框宽度：

div{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border-width: 0;
    border-left:solid 10px red;
}

科学不准确的例子：http://jsfiddle.net/aUdLr/4/

请记住，外部形状不是一个完美的圆形，因为边框被添加到宽度中。您可以通过减小宽度或使用Box-sizing: Border-box 来补偿。

【讨论】：

n1，输入transform: scaleX(0.8)，你就在那里
谢谢，您的解决方案是相关的。但是，我希望形状与图片中的完全相同。我尝试了其他方法，但仍然不是我需要的：jsfiddle.net/aUdLr/5

【解决方案3】：

我想到的最简单的 CSS3 解决方案：

div:before {
    font: 80px serif;
    color: red;
    content: "(";
}

Here's a fiddle.

（现在说真的——如果你想对形状进行大量控制，我建议使用 SVG。）

【讨论】：