html - CSS3 eclipse 形状

Question

如何在 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%;
}

Answer 1

您可以使用边框宽度:

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 来补偿.