CSS3 achieve text wavy line effect

Preface

The clever design of CSS, the realization of the delicate, thin ruminate, its wonderful, marvelous. This wave line, trickery the use of the Linear-gradient attribute, the combination of angle, color, position in one, with Background-size,background-repeat, a lot of, smooth transition. Wow, this last effect is too clever for seconds! There is no word on earth to describe ...

Implementation method

Syntax: linear-gradient (Direction, Color-stop 1, color-stop 2,...... ）

Simple usage: background-image:linear-gradient (red, transparent);

Increased angle, linear-gradient (45deg, red, transparent)

Add a position:linear-gradient (45deg, red, transparent 45%)

Add a colorlinear-gradient (45deg, red, transparent 45%,red)
Do not know you see here, there is no such as see a mirror, Epiphany.

Linear-gradient (45deg, Transparent 45%, red 55%, transparent 60%)

Linear-gradient (135deg, Transparent 45%, red 55%, transparent 60%)

Combine these two lines.

Combine

See here, do you know how to reach the wave line effect? ^_^

The height of the original 1/2

Final code:

Text wavy Line Effect

Summarize

Well, this is achieved, the above is the whole content of this article, I hope to learn from you or use CSS3 can help, if there are questions you can message exchange.