波浪边框CSS

Question

我正试图弄清楚如何制作像这张图片一样的波浪边框：

div {
  position:relative;
  height:100px;
  width:100px;
  background:transparent;
  overflow:hidden;
}

div:before {
  content:"";
  position:absolute;
  top:calc(-100% - 25px);
  left:00%;
  height:200%;
  width:200%;
  border-radius:50%;
  background:cornflowerblue;
  border-bottom:50px solid blue;
}
div:nth-child(2) {
  transform:rotate(180deg);
  margin-left:40px;
  margin-top:-25px;
}

<div></div>
<div></div>

我上面有这个例子，但我想要一个更好的方法。这个例子是非常混乱的方式。

我想过用图像做这个但是每次我想改变颜色方案时都不能用CSS改变颜色。

有人有任何想法吗？

我不想使用椭圆形来制作波浪，因为它不整洁。