Css3实现波浪线效果1

最新推荐文章于 2025-01-02 00:00:00 发布

weixin_34355715

最新推荐文章于 2025-01-02 00:00:00 发布

阅读量1.1k

点赞数

本文详细介绍了如何使用CSS创建不同样式和粗细的波浪线效果，包括修改div的高度和背景高度来调整波浪线的外观。通过调整linear-gradient和background-size属性，可以轻松实现各种波浪线变形。

一、波浪线，常用

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