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

Question

假设我有一个100像素宽和高的div，我想使用CSS / HTML / JS隐藏其中的一部分，并且这部分应该是像披萨三角形一样的圆形。以下是示例： 所以我想要剪切其中的一部分，就像它是一个圆形，具有中心点的坐标和剪切部分的起始/结束角度。

- lukasz

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。

- Fabrizio Calderan

---

这也可以很容易地使用“画布”完成，但我认为确切的问题是有一个“div”。 - Kiril

我认为仅使用一个div元素是很难实现该形状的（尤其是缺失部分需要透明背景的情况下）。也许可以使用嵌套元素、伪元素和旋转来完成，但这会非常棘手。 - Fabrizio Calderan

实际上它也可以是画布，但如果我还想让这个切片大于90度怎么办？例如，我只想显示图像的30度，那么330度必须是透明的。 - lukasz

只需更改点以绘制“反向”切片：points="70,0 50,50 100,30" - Fabrizio Calderan

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

实时示例

- Kyle Needham

---

这只适用于纯色背景（在本例中，背景是白色），它不是真正的剪辑，并且如果背景是图像，则无法工作 http://jsfiddle.net/viphalongpro/xDre6/2/ - King King