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

Question

所以，假设我有一个div 100px的宽度和高度，我想隐藏它的一部分使用CSS / HTML / JS而这部分应该是馅饼的一部分，如披萨三角形。以下是一个示例：

所以我想切割它的一部分，就像它是一个坐标为中间点和切割部分的开始/结束角度的圆圈。

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。

Answer 2

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

HTML

<div class="sqaure"></div>

CSS

.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);
}

Live Example