.info::before {
    content: '';
    position: absolute;
    top: 30px;
    width: 100%;
    height: 0.25em;

    background:
        linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),
        linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}

显示效果：

二、波浪线变形 xxx

修改div的高度和背景高度

.info::before {
    content: '';
    position: absolute;
    top: 30px;
    width: 100%;
    height: 0.5em;

    background:
        linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),
        linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}

显示效果：

三、波浪线 加粗

修改div 的高度和背景高度

.info::before {
    content: '';
    position: absolute;
    top: 30px;
    width: 100%;
    height: 0.5em;

    background:
        linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),
        linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background-size: 1em 1em;
    background-repeat: repeat-x, repeat-x;
}

显示效果：

更多：

HTML5 background-color和background-image问题共用问题

CSS网页布局垂直居中整理

CSS3 Flex布局整理(三)-项目属性

优质内容筛选与推荐>>
1、Scrapy 学习笔记（二）
2、Java StackTraceElement的使用与理解
3、紧急求助!!!!!!!!
4、leetcode——31.下一个排列
5、Java 208 道面试题：Java 基础模块答案

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读

好看

已推荐到看一看

你的朋友可以在“发现”-“看一看”看到你认为好看的文章。

取消 推荐

我知道了

已取消，“好看”想法已同步删除

知道了