Html 使用CSS创建带有锥形端的半环

我一直在试图弄清楚这在CSS中是否可行。我见过一些人们一直在做的非常有创意和疯狂的形状，这似乎并不遥远

我想能够用css创建这个红环

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

目前的做法：

.ring{
背景：橙色；
宽度：250px；
高度：100px；
边界半径：50%/100%；
边框左下半径：0；
边框右下半径：0；
变换：旋转（-65度）；
左边距：-75px；
}

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

这是一把小提琴：

---

我为您创建了一个工作的起点（如果其他人做任何事情都没有乐趣，对吧？）：

本质上，您需要了解更多关于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;
}

---

我为你创造了一个工作的起点（如果其他人做任何事情都没有乐趣，对吧？）

本质上，您需要了解更多关于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;
}

---

这是可能的，但是为什么你需要在CSS中这样做呢？为什么要问为什么？为什么这么有趣呢？如果你是为了一个实用的应用程序而问这个，CSS不是一个好办法。但是如果你只是为了好玩，那也没关系。这是可能的，但是为什么你需要在CSS中这样做呢？为什么要问为什么？怎么会这么有趣呢？好吧，如果你是为了一个实用的应用程序而问这个，CSS不是一个好办法。但如果你只是为了好玩，那没关系，你是对的。我确实需要学习更多关于转换的知识。我知道rotate，但没有注意到rotateY/X，边界方法也很好。你是对的。我确实需要学习更多关于转换的知识。我知道rotate，但没有注意到rotateY/X，边界方法也很好。