关于如何用 CSS 实现不同类型波浪线

1. 样式一

<div class="box"><div class="wave"></div>
</div>

.box {position: relative;width: 800px;height: 30px;margin: 100px auto;background-color: #0f0;
}
.wave {position: absolute;left: 0;top: -5px;width: 100%;height: 20px;background: radial-gradient(circle, #0f0 10px, #0f0, transparent 10px, transparent);background-repeat: repeat-x;background-size: 18px 20px;
}

2. 样式二

<div class="box"><div class="wave"></div>
</div>

.box {position: relative;width: 900px;height: 30px;margin: 100px auto;background-color: #0f0;
}
.wave {position: absolute;left: 0;top: -9px;width: 100%;height: 20px;background: radial-gradient(circle, #0f0 10px, #0f0, transparent 10px, transparent);background-repeat: repeat-x;background-size: 30px 20px;
}

3. 样式三

<div class="box"><div class="wave"></div>
</div>

.box {position: relative;width: 900px;height: 30px;margin: 100px auto;overflow: hidden;
}
.aux-line {position: absolute;left: 0;top: -20px;width: 100%;height: 40px;background: radial-gradient(circle, transparent 10px, transparent, #f00 10px, #f00);background-repeat: repeat-x;background-size: 30px 30px;background-position: 0 0;
}

4. 样式四

<div class="box"><div class="wave"></div><div class="aux-line"></div>
</div>

.box {position: relative;width: 900px;height: 30px;margin: 100px auto;background-color: #0f0;
}
.wave {position: absolute;left: 0;top: -5px;width: 100%;height: 20px;background: radial-gradient(circle, #0f0 10px, #0f0, transparent 10px, transparent);background-repeat: repeat-x;background-size: 30px 20px;
}
.aux-line {position: absolute;left: 0;top: -18px;width: 100%;height: 20px;background: radial-gradient(circle, #fff 10px, #fff, transparent 10px, transparent);background-repeat: repeat-x;background-size: 30px 20px;background-position: 15px 0;
}

5. 样式五

<div class="box"><div class="wave"></div><div class="aux-line"></div>
</div>

.box {position: relative;width: 900px;height: 30px;margin: 100px auto;
}
.wave {position: absolute;left: 0;top: 0;width: 100%;height: 20px;background: linear-gradient(45deg, transparent 45%, #0f0 55%, transparent 55%);background-repeat: repeat-x;background-size: 39px 20px;background-position: 10px 0;
}
.aux-line {position: absolute;left: 0;top: 0;width: 100%;height: 20px;background: linear-gradient(135deg, transparent 45%, #0f0 55%, transparent 55%);background-repeat: repeat-x;background-size: 39px 20px;background-position: 30px 0;
}

6. 样式六

<div class="test"></div>
<div class="test1"></div>

body {background: linear-gradient(90deg, #0ff, #ccc);
}
.test {width: 800px;height: 200px;background: radial-gradient(circle, transparent 30px, transparent, #0f0 30px, #0f0);background-size: 100px 100px;background-repeat: repeat-x;
}
.test1 {width: 800px;height: 200px;background: radial-gradient(circle, #0f0 30px, #0f0, transparent 30px, transparent);background-size: 100px 100px;background-repeat: repeat-x;
}

如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。

关于如何用 CSS 实现不同类型波浪线相关推荐

CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
HTML怎么在字体下方加波浪线,CSS实现文字下面波浪线动画效果
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607 本文可全文转载,个人网站无需授权,但需要保留原作者.出处以及文中链接,任 ...
html怎么在字体中加波浪线,强大的CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
CSS实现文字下面波浪线
方法1.使用径向渐变绘制我们的波浪线效果一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的. 所以,我们只要使用径向渐变绘制圆弧,再通过background-position控制两 ...
登峰连接程式改坐标软件_如何用SOLIDWORKS方程式驱动圆柱波浪线？
下图中的扫描切除,需要用到的核心功能是"方程式驱动曲线",本文会用该模型的绘制方法逐步讲解方程式驱动曲线的功能. 1. 需要建立在3D草图的基础上从切割的路径上就能判断出2D草图 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
如何用viso画波浪线、以及带箭头的波浪线。
如何用viso画波浪线.带箭头的波浪线!!! 搜索过来搜索过去,还是没有找到一个令自己满意的答案,就自己写一个过程了. 首先我使用的是visio 2013版本. 方法一: 打开visio,新建一个基本 ...
如何用CSS适配iPhoneX底部小横条
如何用CSS适配iPhoneX底部小横条前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理 ...

关于如何用 CSS 实现不同类型波浪线

1. 样式一

2. 样式二

3. 样式三

4. 样式四

5. 样式五

6. 样式六

关于如何用 CSS 实现不同类型波浪线相关推荐

最新文章

热门文章