本文介紹了如何用 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 繪制一個不完整的圓圈以及如何在其中放置圖片?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！