ジャギーを取り除くには？

Question

私のコード - Fiddle

body{ 
 
    background: url('http://i.imgur.com/RECDV24.jpg'); 
 
    background-size: cover; 
 
} 
 
div{ 
 
    width: 150px; 
 
    height: 150px; 
 
    background-image: radial-gradient(circle at 0 0, transparent 28px, tomato 28px); 
 
}

<div></div>

どのようにジャギーを削除するには？

私は任意の助けに喜んでいるでしょう、ありがとうございます！

Answer 1

ラウンド素子に大きなbox-shadowと異なるアプローチを取る：

body { 
 
    background: url('https://i.imgur.com/RECDV24.jpg'); 
 
    background-size: cover; 
 
} 
 

 
.bitten { 
 
    height: 150px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 

 
.bitten::before { 
 
    border-bottom-right-radius: 100%; 
 
    box-shadow: 0 0 0 1000px tomato; 
 
    content: ''; 
 
    height: 28px; 
 
    position: absolute; 
 
    width: 28px; 
 
    z-index: -1; 
 
}

<div class="bitten"></div>

Answer 2

一部のブラウザでは、グラデーションに鋭いエッジを持たないため、ギザギザを防ぐことができます。そのため、transparent 28px, tomato 28pxではなく、1pxというように色を少し滑らかにすることができます。

body{ 
 
    background: url('https://i.imgur.com/RECDV24.jpg'); 
 
    background-size: cover; 
 
} 
 
div{ 
 
    width: 150px; 
 
    height: 150px; 
 
    background-image: radial-gradient(circle at 0 0, rgba(255,99,71,0) 28px, rgba(255,99,71,255) 30px); 
 
}

<div></div>

しかし、これはどこでも動作しません。より確かなアプローチについては、もう一つの答えを見てください。