CSS making wavy lines

It is recommended to first understand the radial gradient, the use of linear gradient first

The author of the CSS to make a wavy line explanation is very good: https://www.jianshu.com/p/8570433e3669 don't understand can see the amount of this link

You can go to the rookie tutorial to find a case of a radial gradient to make changes easy to understand how the value of the property is used (*^__^*) hehe ... I hope I can help you.

Note: gradients are not supported in Internet Explorer 9 and previous versions

Code result diagram:

The code is as follows:

Html:

<div class= "Wave" ></div>

Css:

. wave{
Height:. 1rem;
width:100%;
Background-size:. 2rem. 2rem;
Background-image:-webkit-radial-gradient (Transparent 35%, #ddd 45%, transparent 55%);/* Safari 5.1-6.0 */
Background-image:-o-radial-gradient (Transparent 35%, #ddd 45%, transparent 55%);/* Opera 11.6-12.0 * *
Background-image:-moz-radial-gradient (Transparent 35%, #ddd 45%, transparent 55%);/* Firefox 3.6-15 */
Background-image:radial-gradient (Transparent 35%, #ddd 45%, transparent 55%);/* standard syntax (must be placed at the end) */
}

CSS making wavy lines