css border-radiusから中心から外れた円を切り抜く

Question

円が画像の中心にない場合、css border-radiusを使用して円を切り抜く方法？

緑は写真{w、h}です。ポートレートw：h = 3：4。

赤色は、表示される領域です。円中心{x、y} = {0.5w、0.3h}とします。原点は左上にあります。

Answer 1

ここで背景画像をトリミングし、その位置を設定することによって達成一つの方法です。明らかに、ここに試行錯誤がありますが、このようなプログラムをプログラムで計算する必要はありません。

これが役立つ場合はお知らせください。

.circle { 
 
    background-image: url('https://i.stack.imgur.com/e0V1X.png'); 
 
    background-position: 48% 11.75%; 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
}

<div class="circle"></div>