Ask how to write this type of wavy line in css3.

1, as shown in the picture, various immortals, help how to use css3 to draw the following wave line part, are there any relevant examples or ideas.
2,

Thank you very much!

Mar.04,2021

can be done using linear-gradient.
the reference URL is as follows: linear-gradient

combined with everyone's opinions and the help of friends downstairs, the result of another revision is below. (thank you)

<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: -sharpeee;
    background-position: bottom;
  }
</style>

  

if compatibility is considered, div arrangement is more reliable.

Menu