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

Question

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

感激不尽！

Answer 1

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