css repeating-radial-gradient() 拼接 外凸角 ？

Question

<div class= "a"> </div>
<div class= "c"></div>
<div class= "b"> </div>

//css
.a,.b{
display:inline-block;
width:20px;
height:8px ;
border-radius: 4px;
background:blue;
}

.c {
display:inline-block;
width:10px;
height:8px;
}

能否使用 对 c 使用 repeating-radial-gradient()或者其他方法 来无缝连接 a,b ，
在我示例代码中使用了的 纯色背景，当背景带有透明度呢？怎么处理
让看上去这三个div只有一个无间隙的颜色块。