htmlcssgradientrepeating-linear-gradient

Match gradients of two divs, if those have different width

I have 10 inline divs, which have same gradient type - 45deg lines, but gradients have different colors and divs have different width.

Is it possible to match gradient? (hope pics below explain it)

My CSS for gradient. Only color changes.

   #div1 {
     background: repeating-linear-gradient(
        45deg,
        rgba(155,155,155,0.8),
        rgba(155,155,155,0.8) 3px,
        rgba(250,250,250,0.4) 3px,
        rgba(250,250,250,0.4) 6px);
    }

    #div2 {
     background: repeating-linear-gradient(
        45deg,
        rgba(235,102,107,0.6),
        rgba(235,102,107,0.6) 3px,
        rgba(250,250,250,0.4) 3px,
        rgba(250,250,250,0.4) 6px);
    }
div {
  height:100px;
  display:inline-block;
}
<div id="div1" style="width: 30px"></div><div id="div2" style="width: 40px"></div>

How it looks like now (lines are not matching):

lines are not matching

How I want it to look like:

lines are matching

Solution

  • You can use both gradients on the same element and use background-clip trick to hide a part of the first one that will not go until the padding where you will see the second one:

    .box {
  height:100px;
  width:80px;
  padding-right:50px;
  margin:5px;
  display:inline-block;
 background: 
 repeating-linear-gradient(
    45deg,
    rgba(235,102,107,0.6),
    rgba(235,102,107,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) content-box,
 linear-gradient(#fff,#fff) content-box, /*avoid the overlap of both gradient*/
 repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) padding-box;
}
    <div class="box"></div>
<div class="box" style="width:100px;"></div>
<div class="box" style="padding-right:100px;"></div>

    If you have more than 2 gradients you can consider background-size. The trick it to have a white background layer under each one to hide the pervious gradient:

    .box {
  height:100px;
  width:300px;
  margin:5px;
  display:inline-block;
 background: 
 /*First gradient*/
 repeating-linear-gradient(
    45deg,
    rgba(235,102,107,0.6),
    rgba(235,102,107,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/30% 100%,
 linear-gradient(#fff,#fff) left/30% 100%,
 /*Second one*/
 repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/60% 100%,
 linear-gradient(#fff,#fff) left/60% 100%,
 /**/
 repeating-linear-gradient(
    45deg,
    rgba(15,15,15,0.8),
    rgba(15,15,15,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/80% 100%,
 linear-gradient(#fff,#fff) left/80% 100%,
 /**/
 repeating-linear-gradient(
    45deg,
    rgba(12,155,155,0.8),
    rgba(12,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/100% 100%,
 linear-gradient(#fff,#fff) left/100% 100%;
  background-repeat:no-repeat;
}
    <div class="box"></div>

    Here is another idea that rely on mix-blend-mode to achieve the same result with less of code:

    .box {
  height:100px;
  width:300px;
  position:relative;
  display:inline-block;
  background: 
  repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px),
    #fff;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,blue 20%,red 20%, red 40%,orange 40%);
  mix-blend-mode: lighten;
}
    <div class="box"></div>

    Here is another idea that rely on background-attachment:fixed where you can keep transparency also:

    .box {
  height:100px;
  width:30px;
  margin:5px 0;
  display:inline-block;
 background-attachment:fixed;
}
#f1 {
 background-image:repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
}
#f2 {
 background-image:repeating-linear-gradient(
    45deg,
    rgba(15,15,15,0.8),
    rgba(15,15,15,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
}
#f3 {
 background-image:repeating-linear-gradient(
    45deg,
    rgba(12,155,155,0.8),
    rgba(12,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
 }
    <div class="box" id="f1"></div><div class="box" id="f2" style="width:100px"></div><div class="box" id="f3" style="width:150px"></div>

    Another way with multiple background:

    .box {
  height:100px;
  width:300px;
  position:relative;
  display:inline-block;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(250,250,250,1) 3px,
    rgba(250,250,250,1) 6px),
   linear-gradient(to right,
    rgba(235,102,107,0.6) 20%,
    rgba(155,155,155,0.8) 20%, rgba(155,155,155,0.8) 40%,
    rgba(15,15,15,0.8) 40%);
}
    <div class="box"></div>