У меня есть следующий код: (скрипка)

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>

Я в основном хочу, чтобы ширина была чувствительной и чтобы форма градиента сохранялась, даже если ширина меняется.

Что я пробовал:

Установите ширину на 100%, это не работает, потому что это пустой div

Вот и все, у меня нет других идей, если честно. Буду признателен, если кто-нибудь сможет помочь.

Вот для чего я его использую: (изображения являются лишь примером, чтобы показать, что происходит / что я имею в виду)

Но если у меня есть устройство большего размера, это происходит: