我如何用CSS画一个不完整的圆，如何在其中放置图片？

我如何使用CSS和图像创建一个有切面的圆？下面是我想要的一个例子。需要一个交叉浏览器解决方案，并且使用css而不是html

---

您可以通过使用伪元素创建圆，然后使用

溢出：隐藏
倾斜容器来完成此操作

子伪元素是反向倾斜的，以使其看起来好像根本没有倾斜一样


.shape{
位置：相对位置；
高度：100px；
宽度：120px；
溢出：隐藏；
-webkit变换：倾斜（-45度）；
-moz变换：倾斜（-45度）；
变换：倾斜（-45度）；
}
.形状：之后{
位置：绝对位置；
内容：''；
顶部：0px；
左：0px；
高度：100px；
宽度：100px；
背景：黑色；
边界半径：50%；
-webkit变换：倾斜（45度）；
-moz变换：倾斜（45度）；
变换：倾斜（45度）；
}

使用SVG的方法略有不同

您可以使用svg绘制一个剪裁的圆，然后旋转它

小提琴：


svg{-webkit变换：旋转（135度）；
-moz变换：旋转（135度）；
变换：旋转（135度）；
}


我有另一个解决方案，这个方案也使用SVG，但它是交叉的
浏览器兼容根据需要：

请参见此

您不需要任何CSS，只需要三行html


渐变背景是围绕一种奇怪的溢出行为而设计的：隐藏的

设置
边界半径：100%以所有方式获取循环

添加一个
：在
之后添加内容，我们需要取消不需要的部分


.cut{
溢出：隐藏；
宽度：100px；
高度：100px；
边界半径：100%；
背景：-莫兹径向梯度（中心，椭圆覆盖，#0000%，#0001%，#00095%，rgba（0,0,0,0）100%）；
背景：-webkit径向梯度（中心，椭圆覆盖，#000 0%，#000 1%，#000 95%，rgba（0,0,0,0）100%）；
背景：-ms径向梯度（中心，椭圆覆盖，#000 0%，#000 1%，#000 95%，rgba（0,0,0,0）100%）；
背景：径向梯度（中心椭圆，#0000，#00048px，透明49px）；
}
.切：之后{
变换：旋转（-60度）平移（-25像素，-20像素）；
显示：块；
内容：“；
高度：30px；
宽度：100px；
背景色：白色；
}
上的第一个结果google@ThePragmatick为了使这成为一个有用的问题，OP不需要向我们展示他们尝试了什么。在这种情况下，代码无论如何也帮不了我们。如果您对这种情况的原因感兴趣，@GeorgeStocker包含代码对任何人都没有帮助。这是为了表明他们在发布之前做了一些事情。好吧，不管怎样。@atmd:添加了其他前缀mate。现在也可以在其他浏览器中使用：）热爱您的解决方案，因为它是跨浏览器的@阿纳希加扎里安：请不要把这误认为是要求接受我的回答，因为我不是。接受是你自己的选择，但两种答案的跨浏览器性质是相同的，因为两者都使用转换。@AnahitGhazaryan。。Harry是对的：这两种解决方案在跨浏览器方面是相同的compatibility@web-tiki它是我更喜欢的第二个解决方案，但它对我不起作用，因为在我的分区中，它通常不是空的，你能帮我解决这个问题吗？@Persijn“奇怪的边界”行为也会被讨论。同样的问题也会发生在盒子阴影中。如果用户要求css解决方案，那么这怎么可能是公认的答案呢？@Persijn：当用户提出问题并最终得到不同的解决方案时，就会调用这些解决方案。无论如何，这个解决方案只使用HTML来满足它的需求，不是很好。。或者就这样吧。。您仍然需要编写html来绘制css圆圈。。删除所有html并只使用css怎么样。。你有这样的解决方案吗（只有css，没有html）@NoDownvotesPlz我正在尝试将你的代码与我的设计结合起来，我有一个更大的图像，当我把你的代码放在上面时，它没有你想象的样子。我知道我需要改变x，y，z坐标，但不知道具体如何，你能帮我吗？@AnahitGhazaryan。。创造一把你的小提琴problem@AnahitGhazaryan.. 当答案对你有用时也要接受，不要一直接受然后再拒绝。。如果你有更多的问题，用不同的方式提问