Wie man einen überlagerten Stripe -Gradienten mit CSS [Duplikat] macht
Posted: 23 Feb 2025, 17:04
Wie mache ich einen doppelten Gradientensatz von Streifen in CSS? Etwas wie dieses:
>
, aber mit einem Overlay mit dem entgegengesetzten Grad:
.stripe{
background:linear-gradient(
-45deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 21%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);}< /code>
.< /code>
< /div>
< /div>
Wenn Sie sie überlagern, sollte es so etwas sein: < /p>
.stripe {
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(255, 0, 0, 1) 10px,
rgba(255, 154, 0, 1) 11px,
rgba(208, 222, 33, 1) 12px,
rgba(79, 220, 74, 1) 13px,
rgba(63, 218, 216, 1) 14px,
rgba(47, 201, 226, 1) 15px,
rgba(28, 127, 238, 1) 16px,
rgba(95, 21, 242, 1) 17px,
rgba(186, 12, 248, 1) 18px,
rgba(251, 7, 217, 1) 19px,
rgba(255, 0, 0, 1) 20px
),
linear-gradient(
45deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
}< /code>
.< /code>
< /div>
< /div>
< /p>
Aber das funktioniert nicht, da es es immer wieder wiederholt. Wie kann ich das Muster über die gesamte Bar fortsetzen und ausbreiten? HINWEIS: Ohne den Grad auf negativ zu ändern, würde es gleich aussehen, daher möchte ich, dass die Überlagerung -45. Ich versuche herauszufinden, wie man 2 Gradienten herstellt. mit ihnen in ein Streifenmuster überlagert.
>
Code: Select all
.stripe{
background:linear-gradient(
45deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 21%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);}< /code>
., aber mit einem Overlay mit dem entgegengesetzten Grad:
.stripe{
background:linear-gradient(
-45deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 21%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);}< /code>
.< /code>
< /div>
< /div>
Wenn Sie sie überlagern, sollte es so etwas sein: < /p>
.stripe {
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(255, 0, 0, 1) 10px,
rgba(255, 154, 0, 1) 11px,
rgba(208, 222, 33, 1) 12px,
rgba(79, 220, 74, 1) 13px,
rgba(63, 218, 216, 1) 14px,
rgba(47, 201, 226, 1) 15px,
rgba(28, 127, 238, 1) 16px,
rgba(95, 21, 242, 1) 17px,
rgba(186, 12, 248, 1) 18px,
rgba(251, 7, 217, 1) 19px,
rgba(255, 0, 0, 1) 20px
),
linear-gradient(
45deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
}< /code>
.< /code>
< /div>
< /div>
< /p>
Aber das funktioniert nicht, da es es immer wieder wiederholt. Wie kann ich das Muster über die gesamte Bar fortsetzen und ausbreiten? HINWEIS: Ohne den Grad auf negativ zu ändern, würde es gleich aussehen, daher möchte ich, dass die Überlagerung -45. Ich versuche herauszufinden, wie man 2 Gradienten herstellt. mit ihnen in ein Streifenmuster überlagert.