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

2022-01-14 00:00:00 geometry svg css css-shapes

如何使用 CSS 和图像创建一个带有切口的圆圈?我想要的示例如下所示.需要一个跨浏览器解决方案，并且使用 css 而不是 html.

How do I create a circle with a cut through it using CSS and an image in it? An example of what I want is shown below.Need a crossbrowser solution and with css not html.

推荐答案

您可以通过使用伪元素创建圆然后使用 overflow: hidden 倾斜容器来做到这一点.

You can do this by creating the circle using a pseudo-element and then skewing the container with overflow: hidden.

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

The child pseudo-element is reverse skewed to make it appear as though it is not skewed at all.

.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>

相关文章