Примените градиентный фон, который всегда имеет ширину контейнера, даже если сам элемент меньше этого

У меня следующая ситуация:

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: black;
  padding: 10px;
}

.graphContainer {
  height: 50px;
  width: 100%;
}

.graph {
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(24, 24, 24, 0) 0%,
    rgba(232, 35, 35, 0.92) 85%,
    rgba(232, 35, 35, 1) 92%
  );
}

#graph1 {
  width: 100%;
}

#graph2 {
  width: 50%;
}

#graph3 {
  width: 25%;
}
<div class='container'>
  <div class='graphContainer'>
    <div class='graph' id='graph1'></div>
  </div>
  <div class='graphContainer'>
    <div class='graph' id='graph2'></div>
  </div>
  <div class='graphContainer'>
    <div class='graph' id='graph3'></div>
  </div>
</div>

Я хочу, чтобы каждая полоса была окрашена градиентом, равным ширине родительского элемента, чтобы только самые длинные полосы отображали более насыщенный красный цвет. Я понимаю, что можно установить размер фона на фиксированное значение, но я не могу этого сделать, так как максимальная ширина полос неизвестна (100% от родительского), и если я это сделаю background-size: 100%, весь градиент уменьшится до размер бара, как показано в примере. Любая помощь будет оценена по достоинству.

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
0
18
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте комбинацию псевдоэлемента и clip-path

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: black;
  padding: 10px;
}

.graphContainer {
  height: 50px;
  position: relative; /* relative on the container */
}

.graph {
  height: 100%;
  clip-path: inset(0); /* clip the gradient to the element area */
}
.graph:before {
 content: "";
 position: absolute;
 inset: 0;
  background: linear-gradient(
    to right,
    rgba(24, 24, 24, 0) 0%,
    rgba(232, 35, 35, 0.92) 85%,
    rgba(232, 35, 35, 1) 92%
  );
}

#graph1 {
  width: 100%;
}

#graph2 {
  width: 50%;
}

#graph3 {
  width: 25%;
}
<div class='container'>
  <div class='graphContainer'>
    <div class='graph' id='graph1'></div>
  </div>
  <div class='graphContainer'>
    <div class='graph' id='graph2'></div>
  </div>
  <div class='graphContainer'>
    <div class='graph' id='graph3'></div>
  </div>
</div>

примечание для меня: нужно найти дубликат для этого

Temani Afif 09.04.2022 15:33

Другие вопросы по теме