html – 如何使用css创建波形

概述我试图将li元素显示为wave. 我不想使用任何背景图像,但border-radius不支持负值.我希望你能帮助我. 我能得到的最接近的是这只使用css. .one { position: absolute; top: 22px; left: 19px; width: 230px; height: 180px; background: #0F1E3C; border-r 我试图将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 ></div><div ></div>

总结

以上是内存溢出为你收集整理的html – 如何使用css创建波形全部内容，希望文章能够帮你解决html – 如何使用css创建波形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。