1、如图，各路神仙，救助一下怎么用css3画出如下的波浪线部分，有没有相关的示例或者思路。 2、感激不尽！

求问怎么用css3写出这种类型的波浪线

sahalawzh

25133556

发布于
2018-04-23

1、如图，各路神仙，救助一下怎么用css3画出如下的波浪线部分，有没有相关的示例或者思路。
2、图片描述

感激不尽！

javascript

html5 css3 css

阅读 3.7k

5 个回答

wmaker

✓ 已被采纳

可以使用 linear-gradient 完成。
参考网址如下：linear-gradient

结合大家的意见和楼下朋友的帮助，再次修改的结果为下。（感谢）

图片描述

<div class="dash-line"></div>
<style>
  .dash-line {
    width: 500px;
    height: 100px;
    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;
    background-color: #eee;
    background-position: bottom;
  }
</style>

leeenx

61456

发布于
2018-04-23

/* S 这里是容器的样式 - 不需要理会 */ 
        .dash-line {
            width: 100%; 
            height: 50px; 
        }
        /* E 这里是容器的样式 - 不需要理会 */ 
        /* S 这里是波浪线的样式 - 重点 */ 
        .dash-line {
            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;
        }
        /* E 这里是波浪线的样式 - 重点 */

<div class="dash-line"></div>

Justin

1.4k41232

发布于
2018-04-23

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 20px;
        height: 3px;
        transform:skew(40deg);
        display: inline-block;
    }
    .first{
        background: #384b59
    }
    .second{
        background: #5c3434
    }
</style>

</head>
<body>

<div class="first"></div>
<div class="second"></div>
<div class="first"></div>
<div class="second"></div>
<div class="first"></div>
<div class="second"></div>
<div class="first"></div>
<div class="second"></div>

</body>
</html>