html – 如何使用css创建波形

我试图将li元素显示为wave.
我不想使用任何背景图像,但border-radius不支持负值.我希望你能帮助我.

解决方法

我能得到的最接近的是这只使用css.

.one {
  position: absolute;
  top: 22px;
  left: 19px;
  width: 230px;
  height: 180px;
  background: #0F1E3C;
  border-radius: 100%;
  clip: rect(70px,auto,45px);
  transform:rotate(90deg);
}

.one:before {
  content: '';
  position: absolute;
  top: -15px;
  left: -62px;
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 100%;
}

.two {
  position: absolute;
  top: 156px;
  left: 59px;
  width: 230px;
  height: 180px;
  background: #0F1E3C;
  border-radius: 100%;
  clip: rect(70px,45px);
  transform:rotate(-90deg);
}

.two:before {
  content: '';
  position: absolute;
  top: -15px;
  left: -62px;
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 100%;
}

<div class="one"></div>
<div class="two"></div>