CSS - 旋转径向渐变

Question

我有一个带有径向渐变的

，但它的角度不正确。改变简单的线性渐变的角度很容易，但它有多个渐变。我不能在开头添加90度，因为它不起作用。

下面是我的渐变。波浪从底部到顶部，如何将它们旋转使它们从左到右（我只想使用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>

- Kacper G.

---

你可以考虑像我在这个答案中所做的那样改变background-position，以避免第一个切割波浪。 - Temani Afif

谢谢。我会使用它。 - Kacper G.

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>

- JwJB

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>

- vicbyte

---

是的，谢谢，但我只想使用 background 属性。 - Kacper G.

一定有方法可以做到。就像在 linear-gradient 中一样。 - Kacper G.

唯一的方法是调整那些“径向渐变”的位置。径向渐变没有旋转功能。 - vicbyte

Answer 3

你可以使用 :before 伪类来实现渐变背景，然后对 :before 应用 transform（不会影响到 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>

- Bhuwan

---

谢谢，很好，但我只想使用background属性。 - Kacper G.

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>

- Temani Afif