title: Align a responsive 25 degree diagonal line in two containers of unknown height
body: <p>I am trying to align a responsive 25 degree diagonal line with alternate background colors in two containers of unknown height no matter the screen size.</p>
  <p>Is this possible in css?</p>
  <p>See demo code below. This just about lines up in Example 1 at screen width of about 2000px wide. Other than that, nothing lines up ;).</p>
  <p>I can't even get it to work in the first example in two boxes with the same sized content (with  presumably the same height) when the screen size is reduced. I would have thought percentages would work on any sized screen but I must have messed something up.</p>
  <p>The second example is more like my required usage where the bottom container is taller with more content.</p>
  <p><strong>Edit 1 per a comment below:</strong> Confirming that I am hoping to achieve one straight diagonal line at the same 25 degree angle running between the two containers regardless of browser width. eg So the bottom of the diagonal line in the first container lines up with the top of the diagonal line in the second container to literally make a straight diagonal line between the two boxes (with alternate background colors in each container).</p>
  <p><strong>Edit 2:</strong> I was wondering why neither examples included the flex code for the &quot;.box .wrapper&quot; container... I realised that I mistakenly missed the dot on the wrapper in the css... apologies for my error. I do want that flex wrapper to be used in the solution(s) to suit existing code in the project.</p>
  <p>Any ideas?</p>
  <p>Cheers for any help</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*boxes*/
  #wrapper{ width: 100%; display: block; position: relative; margin: 0 auto; text-align: center; z-index: 0; }
  .box { margin: 0; padding: 0; display: block; position: relative; z-index: 1; }
  .box2 { margin-bottom: 50px; }
  .box .wrapper { width: 80%; z-index: 1; 
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; 
  -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; 
  -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  
  /*text*/
  body { font-size: 15px; line-height: 1.5; }
  h1, h2, h3, p { padding: 0 0 30px 0; margin: 0; }
  .box p:last-of-type { padding-bottom: 0; }
  h1 { font-size: 3em; }
  h2 { font-size: 2.8em; }
  h3 { font-size: 2.6em; }
  p { font-size: 2em; }
  
  /*colours*/
  body { color: #000; }
  .box * { color: #fff; }
  body {
    --blue: #11c5f9;
    --pink: #f589f4;
  }
  .box1 { border-bottom: 5px solid #fff; }
  
  /*stripes*/
  .stripes { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1; }
   /*top*/
  #stripeA { 
  background: var(--aqua); 
  background: -o-linear-gradient(335deg, var(--pink) 47.7%, var(--blue) 47.7%); 
  background:    linear-gradient(115deg, var(--pink) 48.7%, var(--blue) 48.7%); }
   /*bottom*/
  #stripeB { 
  background: var(--blue); 
  background: -o-linear-gradient(335deg, var(--blue) 44%, var(--pink) 44%); 
  background:    linear-gradient(115deg, var(--blue) 44%, var(--pink) 44%); }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  
  &lt;h2&gt;Example 1 - Same sized boxes due to same sized content&lt;/h2&gt;
  
  &lt;section class="box box1"&gt;
   &lt;div class="wrapper"&gt;
    &lt;p&gt;same area&lt;/p&gt;
    &lt;p&gt;same area&lt;/p&gt;
    &lt;p&gt;same area&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="stripeA" class="stripes"&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;section class="box box2"&gt;
   &lt;div class="wrapper"&gt;
    &lt;p&gt;same area&lt;/p&gt;
    &lt;p&gt;same area&lt;/p&gt;
    &lt;p&gt;same area&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="stripeB" class="stripes"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;h2&gt;Example 2 - Different sized boxes due to different sized content&lt;/h2&gt;
  
  &lt;section class="box box1"&gt;
   &lt;div class="wrapper"&gt;
    &lt;p&gt;smaller area&lt;/p&gt;
    &lt;p&gt;smaller area&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="stripeA" class="stripes"&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;section class="box box2"&gt;
   &lt;div class="wrapper"&gt;
    &lt;p&gt;larger area. larger area&lt;/p&gt;
    &lt;p&gt;larger area. larger area&lt;/p&gt;
    &lt;p&gt;larger area. larger area. larger area. larger area&lt;/p&gt;
    &lt;p&gt;larger area. larger area&lt;/p&gt;
    &lt;p&gt;larger area. larger area. larger area. larger area&lt;/p&gt;
    &lt;p&gt;larger area. larger area&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="stripeB" class="stripes"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;/div&gt;
  &lt;!-- end #wrapper --&gt;</code></pre>
  </div>
  </div>
  </p>