使用CSS

Question

我一直试图弄清楚这是否可以用CSS。我已经看到了一些人们一直在制作的非常有创意和疯狂的形状，这似乎并不太遥远。

我希望能够用css创建这个红色环。

我认为我一直在尝试半椭圆的路线从一开始就注定要失败，因为我没有办法击倒中心，我可以在这个椭圆内画一个较小的椭圆，但背景是透明的椭圆bg颜色会显示。

当前方法：

.ring{ background: orange; width:250px; height: 100px; border-radius: 50% / 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transform:rotate(-65deg); margin-left:-75px; }

我需要的是能够创建某种锥形椭圆形笔划。

这是一个小提琴：http://jsfiddle.net/clovola/0j7dgc2c/

Answer 1

我为你创造了一个起点（如果别人做了所有事情，这没什么好玩的吧？）：

http://jsfiddle.net/0j7dgc2c/6/

基本上，您需要了解有关CSS transform的更多信息。您可以围绕特定轴旋转并使用矩阵变换。

.ring{
    width:200px;
    height: 200px;
    border: solid orange;
    border-width: 15px 0 15px 25px;
    border-radius: 50%;
    transform: rotateY(45deg);
    margin-left:-75px;
}