CSS - 旋轉徑向漸變

Question

我有一個帶有radial-gradient的<div> ，但它的角度是錯誤的。 改變簡單linear-gradient的角度很容易，但它有多個漸變。 我不能在開始時添加90deg ，因為它不起作用。

下面是我的漸變。 波浪從下到上，如何將它們從左到右轉動（ 我只想使用background屬性 ）？ 感謝幫助。

 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

這應該工作。 交換了圓圈和背景大小的值。

 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

您可以使用CSS transform: rotate屬性來旋轉div，而不是漸變。 :)

 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

您可以在漸變背景的偽類:before使用:before然后將transform應用於:before （不會影響div ）。

堆棧代碼段

 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

只需更改一些值即可。 您還可以指定background-position以避免波形的第一個切割部分：

 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>