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

顯示效果：

 

更多：

HTML5 background-color和background-image問題共用問題

CSS網頁布局垂直居中整理

CSS3 Flex布局整理(三)-項目屬性