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

Question

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

Answer 1

/* 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>

Answer 2

可以使用 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>