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; }
显示效果:
更多: