在兩個高度未知的容器中對齊回應的25度對角線-有解無憂

無論螢屏大小如何，我都試圖在兩個高度未知的容器中將回應性 25 度對角線與備用背景顏色對齊。

這在css中可能嗎？

請參閱下面的演示代碼。這幾乎在示例 1 中以大約 2000 像素寬的螢屏寬度排列。除此之外，沒有任何東西排隊;)。

當螢屏尺寸減小時，我什至無法讓它在具有相同大小內容（可能具有相同高度）的兩個盒子中的第一個示例中作業。我原以為百分比可以在任何尺寸的螢屏上作業，但我一定是搞砸了。

第二個示例更像是我需要的用法，其中底部容器更高，內容更多。

根據下面的評論進行編輯：確認我希望在兩個容器之間以相同的 25 度角實作一條直線對角線，而不管瀏覽器寬度如何。例如，第一個容器中對角線的底部與第二個容器中的對角線頂部對齊，從而在兩個框之間形成一條直線對角線（每個容器中具有交替的背景顏色）。

有任何想法嗎？

為任何幫助干杯

/*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 class="box box1">
 <div class="wrapper">
  <p>same area</p>
  <p>same area</p>
  <p>same area</p>
 </div>
 <div id="stripeA" class="stripes"></div>
</section>
<section class="box box2">
 <div class="wrapper">
  <p>same area</p>
  <p>same area</p>
  <p>same area</p>
 </div>
 <div id="stripeB" class="stripes"></div>
</section>

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

<section class="box box1">
 <div class="wrapper">
  <p>smaller area</p>
  <p>smaller area</p>
 </div>
 <div id="stripeA" class="stripes"></div>
</section>
<section class="box box2">
 <div class="wrapper">
  <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" class="stripes"></div>
</section>

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

uj5u.com熱心網友回復：

背景相當于兩個元素的容器，背景為 50% 一種顏色，另一種顏色圍繞容器的中點旋轉 50%，除了它根據 box1 還是 box2 更改第一種顏色。

這種效果可以通過從主 HTML 中洗掉條紋 div 來實作 - 它們僅用于視覺效果，因此可以通過在兩個框的元素之前放置偽元素來將其完全移動到 CSS 中。

訣竅是這些偽元素采用整個容器的尺寸和位置，但通過使用剪輯路徑防止第二個覆寫第一個。

/*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 class="box box1">
    <div class="wrapper">
      <p>smaller area</p>
      <p>smaller area</p>
    </div>
  </section>
  <section class="box box2">
    <div class="wrapper">
      <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 -->

請注意，對角線為 25 度的整個想法意味著在窄設備/視口上，對角線僅出現在第二個（較高）元素中。無論代碼中使用什么方法，這都是幾何中固有的。窄視口可能需要更陡峭的角度，以便讓對角線效果穿過兩個框。但這不在這個問題范圍內。

uj5u.com熱心網友回復：

玩歪斜：

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 class="box box1">
  <div class="wrapper">
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
  </div>
</section>
<section class="box box2">
  <div class="wrapper">
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
    <p>same area</p>
  </div>
</section>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403309.html

標籤：

上一篇：如何讓一個div覆寫另一個div

下一篇：添加到YouTube的畫布不可見