CSS - 旋转径向渐变

Question

I have got a <div> with radial-gradient , but it is at a wrong angle. Changing the angle of simple linear-gradient is easy, but it has multiple gradients. I can't add 90deg at the start, because it doesn't work.

Below is my gradient. The waves are from bottom to top, how can I turn them to make them from left to right ( I want to use only background property )? Thanks for help.

 div { width: 400px; height: 400px; background: radial-gradient(circle at 100% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 0 -50px; background-size: 75px 100px; } 

 <div> </div> 

Answer 1

This should work. Swapped the values for the circles and background size.

 div { width: 400px; height: 400px; background: radial-gradient(circle at 50% 100%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 50px 0, radial-gradient(circle at 50% 0%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 0 0; background-size:100px 75px; } 

 <div> </div> 

Answer 2

You can use CSS transform: rotate property to rotate the div, instead of gradient. :)

 div { width: 400px; height: 400px; background: radial-gradient(circle at 100% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 0 -50px; background-size:75px 100px; transform: rotate(90deg); } 

 <div></div> 

Answer 3

You can use :before pseudo class for the gradient background and then apply transform to the :before (will not affect div ).

Stack Snippet

 div { width: 400px; height: 400px; position: relative; z-index: 0; } div:before { content: ""; background: radial-gradient(circle at 100% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 0 -50px; background-size: 75px 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: rotate(90deg); z-index: -1; } 

 <div>Content</div> 

Answer 4

Simply change some values. You may also specify a background-position to avoid the first cut part of the wave:

 div { width: 400px; height: 400px; background: radial-gradient(circle at 50% 100%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent), radial-gradient(circle at 50% 0%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent)-116px 0; background-size: 77px 57px; background-position: -5px 25px, 33px 20px; } 

 <div> </div>