CSS：如何將圖像放在一個底部被剪切但頂部彈出的圓圈中？

我有一個父母的div是一個在CSS中完成的圈子，孩子有爆頭的圖像。我試圖讓頭部與底部的圓圈保持一致，但頭部伸出圓的頂邊，類似的以CSS：如何將圖像放在一個底部被剪切但頂部彈出的圓圈中？

圓也有類似的例子邊框。

我正在努力讓它適合這樣的圓形狀。我嘗試過使用clip-path（我試過它在一個圓形，橢圓形和svg掩模上），它掩蓋了圖像以給出幻覺，但我不確定這是否是正確的軌道並使它匹配圓的邊緣有點棘手。任何想法，將不勝感激。

2017-08-11 Bert

兩個SPAN元素。

其中一個圓形邊框，
，內部圓形只有圓角底邊。比保證金和background性質玩....

.circle-face{ 
 
    display: inline-block; 
 
    border: 4px solid #00B9D1; 
 
    border-radius: 50%; 
 
    width: 140px; 
 
    height: 140px; 
 
    margin-top: 30px;    /* 30px forehead space */ 
 
} 
 
.circle-face > *{ 
 
    display: inline-block; 
 
    width: 140px; 
 
    height: 170px;     /* by 30px higher */ 
 
    margin-top: -30px;    /* and offset by 30px */ 
 
    background: none no-repeat center bottom/170px; 
 
    border-radius: 0 0 70px 70px; /* 70 + 70 = 140px width */ 
 
    /* box-shadow: 0 0 0 4px red; /* UNCOMMENT TO SEE THE TRICK */ 
 
}

<span class="circle-face"> 
 
    <span style="background-image:url(https://i.stack.imgur.com/bdZeE.png);"></span> 
 
<span>

來源

2017-08-11 18:31:55

CSS：如何將圖像放在一個底部被剪切但頂部彈出的圓圈中？

回答

相關問題