html – 如何使用css创建波形

前端之家收集整理的这篇文章主要介绍了html – 如何使用css创建波形前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将li元素显示为wave.
我不想使用任何背景图像,但border-radius不支持负值.我希望你能帮助我.

解决方法

我能得到的最接近的是这只使用css. @H_301_9@.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%; } @H_301_9@<div class="one"></div> <div class="two"></div>

猜你在找的HTML相关文章