Apply a gradient background that always has the width of the container, even if the element itself i-CodePudding

I have the following situation:

.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>

What I want is to have each bar colored with a gradient that is the width of the parent element, so that only the longest bars will show the more saturated red. I realize that it is possible to set the background size to a fixed value, but I can't do that since the maximum width of the bars is unknown (100% of the parent) and if I do background-size: 100% the whole gradient scales down to the size of the bar, as shown in the example. Any help would be appreciated.

CodePudding user response：

Use a combination of pseudo element and 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>