本文介绍了如何用 CSS 绘制一个不完整的圆圈以及如何在其中放置图片?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
如何使用 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>这篇关于如何用 CSS 绘制一个不完整的圆圈以及如何在其中放置图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！