Question

我有一个<div> radial-gradient，但它的角度是错误的。更改简单linear-gradient的角度很简单，但它有多个渐变。我无法在开始时添加90deg，因为它无法正常工作。

以下是我的渐变。波浪从下到上，如何将它们从左到右转动（我只想使用background属性）？谢谢你的帮助。

＆＃13;

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;
}

＆＃13;

<div>

</div>

＆＃13;

Answer 1

这应该有效。交换了圆圈和背景大小的值。

＆＃13;

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;
}

＆＃13;

<div>

</div>

＆＃13;

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伪类用于渐变背景，然后将transform应用于:before（不会影响div）。

Stack Snippet

＆＃13;

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;
}

＆＃13;

<div>Content</div>

＆＃13;

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>

CSS - 旋转径向渐变

4 个答案: