如何使用CSS和图像创建一个带有切口的圆圈？我想要的一个例子如下所示.需要一个crossbrowser解决方案,并且css不是html.
解决方法
您可以通过使用伪元素创建圆,然后使用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>
