Css3實現波浪線效果1

時間 2019-12-05

標籤 css3 css 實現波浪效果欄目 CSS 简体版

原文原文鏈接

1、波浪線，經常使用html

.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、波浪線變形 xxxspa

修改div的高度和背景高度code

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

顯示效果：htm

3、波浪線加粗blog

修改div 的高度和背景高度get

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