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

Question

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

Answer 1

您可以通过使用伪元素创建圆,然后使用倾斜容器来完成此操作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);
}

<div class="shape"></div>

Answer 2

我有另一个解决方案,这个也使用SVG,但是需要OP 浏览器兼容:

看到这个小提琴

你不需要任何CSS,只需要三行html

<svg >
 
 <circle cx="50" cy="50" r="50" clip-path="url(#cut-off-bottom)" />
  <polygon points="0,0 40,0 0,50" style="fill:white;" />
</svg>

编辑: 我想添加的另一件事,你也可以在svg内显示图像

<svg>

  <pattern id="img1" patternUnits="userSpaceOnUse" width="200" height="200">
    <image xlink:href="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" x="0" y="-50" width="200" height="200" />
  </pattern>
  <circle cx="50" cy="50" r="50" fill="url(#img1)" />


  <polygon points="0,0 40,0 0,50" style="fill:white;" />
</svg>

而且,你甚至不需要css,而且它也是高度跨浏览器兼容的.

Answer 3

使用SVG的方法略有不同

您可以使用svg绘制剪裁的圆,然后旋转它.

小提琴:http://jsfiddle.net/j66xt2so/

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

<svg >
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="70" r="50" clip-path="url(#cut-off-bottom)" />
</svg>