Background mit ansprechendem Farbverlauf

Ich habe den folgenden Code: Geig)

body {
  background-color: red;
}
#grad1 {
  height: 100px;
  width: 100%;
  background: linear-gradient(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%);
}
<div id="grad1"></div>

Ich möchte, dass die Breite anspricht und die Form des Verlaufs beibehalten wird, auch wenn sich die Breite ändert.

Was ich versucht habe:

Stellen Sie die Breite auf 100% ein. Dies funktioniert nicht, da es sich um ein leeres div @ handel

Das war's auch schon, ich habe ehrlich gesagt keine anderen Ideen. Ich würde mich freuen, wenn jemand helfen könnte.

Das ist, wofür ich es benutze: (Die Bilder sind nur ein Beispiel, um zu zeigen, was passiert / was ich meine)

Aber wenn ich ein größeres Gerät habe, passiert das:

Antworten auf die Frage(6)

Ihre Antwort auf die Frage