CSS实现波浪线

最新推荐文章于 2024-04-19 14:20:16 发布

今天也要学习！！

最新推荐文章于 2024-04-19 14:20:16 发布

阅读量2.4k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_65848822/article/details/126320589

版权

使用css3线性渐变完成波浪线效果

代码如下

   <style>
        div {
            width: 1000px;
            height: 25px;
            background:
                linear-gradient(135deg, transparent, transparent 45%, #333, transparent 55%, transparent 100%),
                linear-gradient(45deg, transparent, transparent 45%, #333, transparent 55%, transparent 100%);
            background-size: 50px 50px;
            background-repeat: repeat-x, repeat-x;
        }
    </style>


<body>
    <div>

    </div>
</body>

实现效果