如何用CSS绘制一个不完整的圆,并在它如何放一张图片? [英] How do I draw an incomplete circle with CSS and in it how to put a picture?
本文介绍了如何用CSS绘制一个不完整的圆,并在它如何放一张图片?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用CSS和图片创建一个带有切口的圆形?我想要的一个例子如下所示。需要一个crossbrowser解决方案和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
.
子伪元素被反向倾斜
.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绘制一个不完整的圆,并在它如何放一张图片?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文