Javascript 创建一个类似比萨饼的圆圈

是否有任何方法可以使用JavaScript或CSS3创建一个缺少片段的圆（如图片）

---

请查找下面的代码

#myshape
     { 
         width: 0px; height: 0px;
         border-right: 60px solid transparent;
         border-top: 60px solid red;
         border-left: 60px solid red;
         border-bottom: 60px solid red;
         border-top-left-radius: 60px;
         border-top-right-radius: 60px; 
        border-bottom-left-radius: 60px; 
        border-bottom-right-radius: 60px; 
}

另一种解决方案是使用两种形状，首先创建一个圆，然后在其上放置一个窄三角形（使三角形的颜色为白色和绿色），对于窄三角形，可以使用以下代码

.narrowtriangle
{
    width: 0;
    height: 0;
    text-indent: -9999px;
    border-right: 40px solid transparent;
    border-bottom: 100px solid #f09;
    border-left: 150px solid transparent;
}

对于圆圈，你可以用这个

 #circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

画布可能在现代浏览器中对您有所帮助。

---

实现此形状的另一种方法是在圆的顶部使用伪元素，对元素进行倾斜变换并将其定位，就像它从圆中剪切出一个扇区一样。更改倾斜变换的角度可以使扇区看起来更大或更小（将示例悬停在片段中以查看其实际操作）

请注意，这仅适用于切割圆的四分之一。如果需要剪切更多，则需要额外的伪元素。另外，伪元素有白色背景，因此当页面背景不是纯色时不能使用

.pizza{
位置：相对位置；
高度：250px；
宽度：250px；
边界半径：50%；
填充：2px；
背景：浅绿色；
背景剪辑：内容框；
溢出：隐藏；
}
.比萨饼：以后{
位置：绝对位置；
内容：''；
身高：100%；
宽度：100%；
边界半径：0%；
左：50%；
前-50%；
背景：白色；
变换原点：左下角；
变换：歪斜（-15度）歪斜（-30度）；
过渡：所有1；
}
.比萨饼：悬停：之后{
变换：歪斜（-15度）歪斜（-90度）；
}
.插图：之后{
背景：红色；

它是如何生产的？

为什么人们坚持在这类事情上使用CSS？为什么不直接使用SVG？我建议您四处看看如何制作饼图的教程（）好的，我会的，我不需要使用css来实现，但这只是一个建议，它只允许90°/180°/270°剪切，最终形状的方向也有限。它不会产生像OPs图形中那样的通用剪切。我很遗憾，我需要一个非常糟糕的特定形状=(