Javascript 隐藏方形/矩形div的饼图部分

假设我有一个div 100px的宽度和高度，我想用CSS/HTML/JS隐藏它的一部分，这部分应该是一个饼的一部分，就像一个比萨饼三角形。以下是一个例子：

---

所以我想把它的一部分切割成一个圆，有一个中点的坐标和切割部分的开始/结束角。

你可以用一个

SVG

形状，使用一个或一些CSS转换，但没有真正的透明度（如在你的图像中）

代码笔示例

---

SVG解决方案的标记

<svg width="100px" height="100px" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <desc>Square without a pizza slice</desc>
  <polygon fill="cyan" points="0,0 0,100 100,100, 100,30, 50,50 70,0" />

</svg>

div { 
  background: cyan;
  overflow: hidden;
  width: 100px; height: 100px; 
  position: relative; 
}

div:before {
  content: "";
  position: absolute;  
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: #fff;
  -webkit-transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
  -ms-transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
  -moz-transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
  transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
}

---

结果截图

---

使用变换，所有边仍然平滑，但是，使用这种方法，您需要手动计算

skew

和

rotate

的值，而不是像SVG方法那样传递坐标列表，并且还需要为伪元素指定准确的

背景颜色。
您可以使用
CSS:after
和
transform
来在右上角放置一个三角形

HTML
使用
canvas
也可以很容易地完成，但我认为确切的问题是存在
div
我认为仅使用div就不可能获得该形状（尤其是缺少部分的透明背景）。可能使用嵌套元素，处理伪元素和旋转是可能的，但这真的很棘手，实际上它也可以是画布，但如果我还希望切片大于90度呢？例如，我只想显示30度的图像，因此330度必须是透明的，这意味着改变点以便绘制“反向”切片：
points=“70,0 50,50 100,30”
这只适用于固体背景（在这种情况下，背景是白色的），如果背景是图像，它不会真正剪裁，也无法工作
<div class="sqaure"></div>

.sqaure {
    position: relative;
    background: cyan;
    width: 100px;
    height: 100px;
}

.sqaure:after {
    position: absolute;
    top: -20px;
    right: -40px;
    content:"";
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 90px solid white;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}