Align a responsive 25 degree diagonal line in two containers of unknown height-CodePudding

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.

Is this possible in css?

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

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.

The second example is more like my required usage where the bottom container is taller with more content.

Edit per a comment below: 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).

Any ideas?

Cheers for any help

/*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%); }

<div id="wrapper">

<h2>Example 1 - Same sized boxes due to same sized content</h2>

<section >
 <div >
  <p>same area</p>
  <p>same area</p>
  <p>same area</p>
 </div>
 <div id="stripeA" ></div>
</section>
<section >
 <div >
  <p>same area</p>
  <p>same area</p>
  <p>same area</p>
 </div>
 <div id="stripeB" ></div>
</section>

<h2>Example 2 - Different sized boxes due to different sized content</h2>

<section >
 <div >
  <p>smaller area</p>
  <p>smaller area</p>
 </div>
 <div id="stripeA" ></div>
</section>
<section >
 <div >
  <p>larger area. larger area</p>
  <p>larger area. larger area</p>
  <p>larger area. larger area. larger area. larger area</p>
  <p>larger area. larger area</p>
  <p>larger area. larger area. larger area. larger area</p>
  <p>larger area. larger area</p>
 </div>
 <div id="stripeB" ></div>
</section>

</div>
<!-- end #wrapper -->

CodePudding user response：

The background is equivalent to the a container for both elements having a background 50% one color, 50% the other color rotated about the mid point of the container except it changes which is the first color depending on whether in box1 or box2.

This effect can be achieved by removing the stripe divs from the main HTML - they are only there for visual effect so this can be moved completely into CSS by putting pseudo before elements on the two boxes.

The trick is that these pseudo elements take on the dimensions and positioning of the entire container, but are prevented from the second overwriting the first by using a clip path.

/*boxes*/

#wrapper {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
  text-align: center;
  z-index: 0;
  position: relative;
}

.box {
  margin: 0;
  padding: 0;
  display: block;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.box2 {
  margin-bottom: 50px;
  margin-top: 5px;
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: linear-gradient(-25deg, var(--color1) 0 50%, var(--color2) 50% 100%);
}

.box1::before {
  --color1: var(--pink);
  --color2: var(--blue);
}

.box2::before {
  --color1: var(--blue);
  --color2: var(--pink);
}

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

body {
  --blue: #11c5f9;
  --pink: #f589f4;
}

<h2>Example 2 - Different sized boxes due to different sized content</h2>
<div id="wrapper">

  <section >
    <div >
      <p>smaller area</p>
      <p>smaller area</p>
    </div>
  </section>
  <section >
    <div >
      <p>larger area. larger area</p>
      <p>larger area. larger area</p>
      <p>larger area. larger area. larger area. larger area</p>
      <p>larger area. larger area</p>
      <p>larger area. larger area. larger area. larger area</p>
      <p>larger area. larger area</p>
    </div>
  </section>

</div>
<!-- end #wrapper -->

Note that the whole idea of having a diagonal at 25degrees means that on narrow devices/viewports the diagonal only occurs in the second (taller) element. This is inherent in the geometry whatever method is used in the code. It may be that a steeper angle is what is wanted for narrow viewports in order to get the diagonal effect going across both boxes., but that is outside this question.

CodePudding user response：

play with skewing:

body {
  --blue: #11c5f9;
  --pink: #f589f4;
  font-size: 25px;
  font-weight: bold;
}

.box {
  position: relative;
  z-index: 0;
  overflow: hidden;
  text-align: center;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -20%;
  transform: skewX(-25deg);
}

.box1:before {
  background: linear-gradient(90deg, var(--blue) 50%, var(--pink)0);
  transform-origin: bottom; /* bottom for the top secton */
}

.box2:before {
  background: linear-gradient(-90deg, var(--blue) 50%, var(--pink)0);
  transform-origin: top; /* top for the bottom section */
}

<section >
  <div >
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
  </div>
</section>
<section >
  <div >
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
  </div>
</section>