css写波浪线

最新推荐文章于 2024-05-22 20:10:50 发布

原创最新推荐文章于 2024-05-22 20:10:50 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #波浪线

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

css

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
          .dash-line {

            width: 100%; 
            height: 50px; 
            background: linear-gradient(30deg, transparent 0, transparent 5px, blue 5px, blue 25px, transparent 25px, transparent 30px, red 30px, red 50px, transparent 50px, transparent 55px) repeat-x;
            background-size: 100px 3px;
              }
	</style>
</head>
<body>
      <div class="dash-line"></div>
</body>
</html>

效果图
在这里插入图片描述