切出另一種形狀的形狀CSS - 跨瀏覽器兼容

Question

我有白色和紅色，整圓，絕對定位的div。有沒有一種方法可以將所有的白色圓圈切成透明的並且是跨瀏覽器兼容的？尋找最「原始」的方式。

Answer 1

您可以使用邊界半徑爲。

檢查這個例子：

.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>