CSSで別のシェイプのシェイプを切り取る - クロスブラウザの互換性

Question

私は、白と赤の完全な円、完全に配置されたdivを持っています。 CSSで透過的でクロスブラウザと互換性があるように、すべての白い円を切り取る方法はありますか？最も「原始的な」方法を探してください。

Answer 1

これにはborder-radiusを使用できます。

チェックこの例では：

.container { 
 
    background: black; 
 
    width: 490px; 
 
    height: 490px; 
 
    position: relative; 
 
    background: black url(http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg) no-repeat -500px -500px; 
 
} 
 
.r1 { 
 
    width: 400px; 
 
    height: 400px; 
 
    border-radius: 400px; 
 
    border: 30px solid red; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 
.r2 { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 300px; 
 
    border: 30px solid red; 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 60px; 
 
} 
 
.r3 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 200px; 
 
    border: 30px solid red; 
 
    position: absolute; 
 
    top: 110px; 
 
    left: 110px; 
 
}

<div class="container"> 
 
    <div class="r1"></div> 
 
    <div class="r2"></div> 
 
    <div class="r3"></div> 
 
</div>

Answer 2

あなたは、放射状のグラデーションを見てとることがあります。

html { 
 
    min-height: 100%; 
 
    background-image: radial-gradient(
 
    circle /* a circle*/ 
 
    closest-side at 50% 50% /* set as closed as possible to center*/, 
 
    transparent 0 /* from center */, 
 
    /* to */transparent 50px, 
 
    /* from */red 50px, 
 
    /* to */red 60px, 
 
    /*from */transparent 60px, 
 
    /* to */transparent 70px, 
 
    /* from */red 70px, 
 
    /* to */red 80px, 
 
    /* from */transparent 80px, 
 
    /* to */ transparent 100px, 
 
    /* from */ red 100px, 
 
    /* to */ red 120px, 
 
    /* from */ transparent 120px 
 
    /* and so or till end */), 
 
    /* bg image to show transparency */  url(http://lorempixel.com/150/150); 
 
}

を必要に応じてできるだけ多くのパターンを繰り返し続けます。パーセントとピクセル値を混合するにはcalc()exampleを使用することもできます。

Answer 3

あなたにもSVGを使用することができます。

body { 
 
    height: 100vh; 
 
    margin: 0; 
 
    display: flex; 
 
} 
 
svg { 
 
    flex: 1; 
 
    background: url(http://fillmurray.com/638/220) no-repeat center center/cover; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <circle cx="50%" cy="50%" r="40" stroke="#F44336" stroke-width="8" fill="none" /> 
 
    <circle cx="50%" cy="50%" r="60" stroke="#F44336" stroke-width="6" fill="none" /> 
 
    <circle cx="50%" cy="50%" r="80" stroke="#F44336" stroke-width="10" fill="none" /> 
 
</svg>