Css3实现波浪线效果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;
}

显示效果：

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