Css3实现波浪线效果1

1、波浪线 ，经常使用

.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;
}

显示效果：

 

2、波浪线变形 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;
}

显示效果：

 

3、波浪线 加粗

修改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布局整理(三)-项目属性