切出另一种形状的形状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>