html – 如何使用css创建波形

发布时间：2020-12-14 22:30:02 所属栏目：资源来源：网络整理

导读：我试图将li元素显示为wave. 我不想使用任何背景图像,但border-radius不支持负值.我希望你能帮助我. 解决方法我能得到的最接近的是这只使用css. .one { position: absolute; top: 22px; left: 19px; width: 230px; height: 180px; background: #0F1E3C; bord

我试图将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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!