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

Question

假设我有一个宽度和高度为 100px 的 div，我想使用 CSS/HTML/JS 隐藏它的一部分，这部分应该像披萨三 Angular 形一样是馅饼的一部分。这是一个例子:

所以我想切割它的一部分，就像它是一个具有中点坐标和切割部分开始/结束 Angular 圆。

Answer 1

你可以用 SVG 形状来做，使用 polygon或者使用一些 CSS 转换但没有真正的透明度(如您的图片所示)。

codepen 上的示例 http://codepen.io/anon/pen/jLdez/

---

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>

---

CSS 解决方案的样式

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 方法中 — 您还需要为伪元素指定确切的 background-color。