如何使用CSS绘制一个不完整的圆圈,并在其中绘制图片？

如何使用CSS和图像创建一个带有切口的圆圈？我想要的一个例子如下所示.需要一个crossbrowser解决方案,并且css不是html.

您可以通过使用伪元素创建圆,然后使用倾斜容器来完成此操作overflow: hidden.

子伪元素反向倾斜,使其看起来好像根本没有倾斜.

.shape {
  position: relative;
  height: 100px;
  width: 120px;
  overflow: hidden;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}
.shape:after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100px;
  width: 100px;
  background: black;
  border-radius: 50%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
}

svg{-webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}