如何使用 CSS 绘制一个不完整的圆圈以及如何在其中放置图片？

Question

如何使用 CSS 和图片创建一个带有切口的圆圈？下面显示了我想要的示例。需要一个跨浏览器解决方案，并且使用 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，但是是 cross 浏览器兼容 根据 OP 需要：

看到这个Fiddle

你不需要任何 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>

Answer 4

渐变背景是一种解决溢出的奇怪行为：隐藏
将border-radius:100%; 设置为各种方式获取通知。

添加了:after 来添加我们需要的内容来取消我们不想要的部分。

.cut {
  overflow: hidden;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: -moz-radial-gradient(center, ellipse cover, #000 0%, #000 1%, #000 95%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #000 0%, #000 1%, #000 95%, rgba(0, 0, 0, 0) 100%);
  background: -ms-radial-gradient(center, ellipse cover, #000 0%, #000 1%, #000 95%, rgba(0, 0, 0, 0) 100%);
  background: radial-gradient(ellipse at center, #000 0, #000 48px, transparent 49px);
}
.cut:after {
  transform: rotate(-60deg) translate(-25px, -20px);
  display: block;
  content: "";
  height: 30px;
  width: 100px;
  background-color: white;
}

<div class="cut"></div>