一、波浪线 ，常用
.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;
}
显示效果：
更多：