CSS Linear Gradient for Div with Dynamic Height

CSS linear gradient for div with dynamic height

You can code it like below:

.box {
  height:100px;
  background: 
    linear-gradient(to bottom right,#0000 50%,rgba(255,183,107,1) 50.1%) 
        top right /1000px 1730px no-repeat /* 1.73 = tan(60deg) */
    rgba(255,127,4,1);
    
    /* resize and see the result*/
    resize:both;
    overflow:hidden;
}

<div class="box"></div>

fixed background gradient with dynamic width

I've taken your snippet and replaced your % values on the gradient with an absolute pixel value. I've also inverted the gradient so it goes from left to right, from red to the other color. You can check that if you modify the width of the bar, the red still remains visible.

background: linear-gradient(to right, red, #C7D9F8 30px);

Full snippet below:

function changeWidth(){    $("#hp").css("width","10%");}
function reset(){  $("#hp").css("width","30%");}

#cont {width:170px; height:170px; background:#000; position:relative}#hp { position: absolute; bottom: 5%; width: 30%; height: 10px; background: linear-gradient(to right, red, #C7D9F8 30px); left: 5%; transition: all 1s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><div id="cont">  <div id="hp"></div></div>
<button onclick="changeWidth()"> Run</button><button onclick="reset()"> Reset</button>

Dynamic Height / Gradient under image in DIV using CSS

As you say, your main problem is making the right column as tall as the page, i.e. extend down as far as the main content. This can be solved by adding to the CSS:

#columnrt {
width:200px;
background-color:#673601;
position:absolute;
top: 0;
right:0;
bottom:0;
}

That will make the height of the right column extend properly, allowing you to add the gradient.

Linear gradient with custom size

Assuming that all items have equal widths, then the gradient should start at the midpoint of 1 and end at the midpoint of 5, which means it should start at the 10% mark and end at the 90% mark, something like linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%).

To restrict the size of the background, you can use background-size: 100% [DESIRED_HEIGHT] to control it. Say you want the bar to be 16px thick, then you can use background-size: 100% 16px. Combine that with background-repeat: no-repeat to avoid the gradient from repeating, and background-position: center center to center it.

See proof-of-concept example:

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  
  background-image: linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%);
  background-size: 100% 8px;
  background-repeat: no-repeat;
  background-position: center center;
}

ul.colors {
  background-image: linear-gradient(
    to right,
    transparent 10%,
    red 10%,
    red 30%,
    orange 30%,
    orange 50%,
    green 50%,
    green 70%,
    blue 70%,
    blue 90%,
    transparent 90%
  );
}

ul li {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

<strong>Plain</strong>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<br /><br />
<strong>Colors</strong>
<ul class="colors">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Maintain gradient size when element is resized

define a fixed size for the gradient:

@keyframes resize {
  50% {
    width: 50%
  }
  100% {
    width: 100%
  }
}

.box {
  height: 100px;
  width: 100%;
  background-image: linear-gradient( 90deg, red 50%, blue 50%);
  background-size:100vw 100%; /* added */
  animation: resize linear 2s infinite;
}

<div class="box"></div>

Creating a box with a dynamic height

Method #01:

Use transformed pseudo element i.e :before or :after.

body {  background: #ccc;}
div {  position: relative;  overflow: hidden;  height: 100px;}
div:before {  transform: rotate(-3deg);  position: absolute;  background: brown;  height: 100%;  bottom: 40%;  content: '';  right: -50px;  left: -50px;}

<div></div>

Dynamically update Linear Gradient CSS

The issue is because you need to concatenate the values in to a string which you set as the value of style.backgroud. As you're already using template literals, try this:

slider.style.background = `linear-gradient(to left, ${gradColor1}, ${gradColor1})`

Note that if you want to specify a gradient you'll need two colours, like this:

var percentage1 = 50;var color1 = "#C00";var percentage2 = 100;var color2 = "#000";
slider.style.background = `linear-gradient(to left, ${color1} ${percentage1}%, ${color2} ${percentage2}%)`;

#slider {  width: 200px;  height: 200px;}

<div id="slider"></div>

Creating a div with dynamic height and an arrow facing inwards using CSS

Using Linear Gradients:

You can do it using a couple of angled linear-gradients like in the below snippet. As you can see from the snippet, it can adapt to any height even if the content wraps around (or) if it spans multi-lines.

The shape is created as follows:

• Couple of linear-gradients (with to [side] [side] syntax) which is colored for almost 50% and transparent for the remaining 50%. Both these gradients have 50% size in Y-axis (that is, half of the element's height) and has 20px size in X-axis (meaning it has a fixed width for the triangle).
• These linear gradients are positioned at the right top and right bottom of the element to produce the triangle effect.
• One more linear-gradient (which is actually a solid color) whose size in Y-axis is 100% height of the parent and size in X-axis is 20px less than 100% (using calc). This produces the colored area aside from the triangular area.

The advantages of this approach are as follows:

• It doesn't require any extra elements (real or pseudo) and hence there is no unwanted clutter in the markup and the pseudo-elements can be used for other things.
• As can be seen in the last div, it would adapt itself even if the width of the div changes also.
• The triangular cut at the right side is transparent and so the background of the page can also be seen through the cut, if required.

The only two drawbacks of this approach are as follows:

• Gradients have a lower browser support compared to pseudo-elements (works only in IE10+) and
• At some very wide angles, the angled sides will be a bit jagged.

.shape {  position: relative;  width: 200px;  color: white;  padding: 8px;  margin: 4px;  background: linear-gradient(to bottom right, rgb(128, 0, 128) 49%, transparent 51%), linear-gradient(to top right, rgb(128, 0, 128) 49%, transparent 51%), linear-gradient(to right, rgb(128, 0, 128), rgb(128, 0, 128));  background-size: 20px 50%, 20px 50%, calc(100% - 20px) 100%;  background-position: 100% 0%, 100% 100%, 0% 0%;  background-repeat: no-repeat;}.shape.wide {  width: 300px;}

<div class='shape'>Some div with small content</div>
<div class='shape'>Some div with large content that wraps around into multiple lines</div>
<div class='shape'>Some div with large content that wraps  <br>around into multiple lines  <br>even spanning multiple lines</div>
<div class='shape'>Some div with  <br>large content that wraps  <br>around into multiple lines  <br>even spanning  <br>multiple lines</div>
<div class='shape wide'>Some div with  <br>large content that wraps  <br>around into multiple lines  <br>even spanning  <br>multiple lines</div>

---

Related Topics