javascript - 基于页面高度的css三 Angular 形

Question

目前我遇到的情况如下图所示。

但现在我想要一个在每一页上都相同的三 Angular 形。无论页面多长。因此，例如，如果页面真的很长，那么三 Angular 形会在某一时刻离开屏幕，并且不会再有绿色背景。 (如图所示)

但最重要的是，在每一页上，三 Angular 形/Angular 都将相同。如何做到这一点？

$(document).ready(function() {
  function waitForElement(elementPath, callBack) {
    window.setTimeout(function() {
      if ($(elementPath).length) {
        callBack(elementPath, $(elementPath));
      } else {
        waitForElement(elementPath, callBack);
      }
    }, 300)
  }

  waitForElement("#leftdiv", function() {
    // Initial background height set to be equal to leftdiv
    $('#rightdiv').height($('#leftdiv').height());

    // Initial triangle height set to be equal to leftdiv
    $('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
  });


  // When window resizes
  $(window).resize(function() {
    // Change height of background
    $('#rightdiv').height($('#leftdiv').height());

    // Change height of white triangle
    $('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
  });

});

.container-general {
  float: left;
  position: relative;
  background-color: black;
  height: 500px;
  width: 70%;
}

.background-general {
  float: right;
  position: relative;
  /*height is set in javascript*/
  width: 30%;
  background-color: green;
}

#triangle {
  position: absolute;
  height: 0;
  width: 0;
  bottom: 0;
  left: -1px;
  border-left: 10vw solid white;
  border-right: 0px solid transparent;
  /*border-top is set in javascript*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
  <div id="triangle"></div>
</div>

Answer 1

你根本不需要 JavaScript 和 jQuery，只要你愿意对你的标记做一些小的改变:

第 1 步:更新您的标记

1. 包装你的 .container-general和 .background-general具有共同的父元素
2. 使用display: flex; overflow: hidden;在 parent 身上。这具有将较短的背景元素拉伸(stretch)到 .container-general 的全高的效果。

第二步:确定你想要的固定 Angular 并设置纵横比

重要说明:如果您想保持 Angular 不变，您需要知道您想要的 Angular 。这将需要一个重要的技巧:你想保留 .background-general在所有情况下都具有相同的纵横比，因此 Angular 保持不变。假设您希望它为 60°(即 Math.Pi / 3):通过一些数学运算，这意味着 .background-general 的高度应该是这个相对于宽度的比例:

containerHeightRatioToWidth = Math.tan(Math.PI / 3) = 1.732052602783882...

有a trick to preserve the aspect ratio: you simply set the padding-bottom of the background element .在这种情况下，您希望它是 padding-bottom: 173%); (我们不需要绝对精度，所以我们可以去掉小数点)。

这是一个方便的高度表(以 CSS 百分比表示)，您可以使用:

• 30 度:padding-bottom: 57%:
• 45 度:padding-bottom: 100%:
• 60 度:padding-bottom: 173%:

您还可以通过粘贴以下代码在浏览器控制台中预先计算百分比:

var desiredAngleInDegrees = 60;
Math.tan(Math.PI * desiredAngleInDegrees / 180) * 100

标记的结构如下:

└─┬.wrapper
  ├──.container-general
  └─┬.background-general
    └─┬.background-general__background
      ├─::before (triangle)
      └─::after (remaining fill)

---

要实现三 Angular 效果，有两种方法:

步骤 3A:使用 clip-path将背景元素 trim 成三 Angular 形

clip-path is very widely supported by modern browsers ，IE11 和 Edge 有一个明显的异常(exception):/这应该可以解决问题:clip-path: polygon(100% 0, 0 0, 100% 100%);

.wrapper {
  display: flex;
  overflow: hidden;
}

.container-general {
  background-color: black;
  height: 500px;
  width: 70%;
}

.background-general {
  position: relative;
  width: 30%;
  background-color: green;
  overflow: hidden;
}

.background-general__background {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Triangle */
.background-general__background::before {
  flex-grow: 0;
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 173%;
  background-color: white;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}

/* Extra fill */
.background-general__background::after {
  flex-grow: 1;
  content: '';
  display: block;
  background-color: white;
  
  /* Needed to fix subpixel rendering */
  margin-top: -1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container-general" id="leftdiv">
  </div>
  <div class="background-general" id="rightdiv">
    <div class="background-general__background"></div>
  </div>
</div>

第 3B 步:使用内联 SVG 作为背景图片

为了更好的浏览器兼容性，使用内联编码的 SVG 并将其拉伸(stretch)到父级的 100% 宽度和 100% 高度。

我们可以使用以下标记创建一个简单的 10×10 像素 SVG:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10">
  <path fill="green" d="M0,0 L10,0 L10,10 z"></path>
</svg>

注意:preserveAspectRatio="none"是必需的，以便我们可以自由地将 SVG 拉伸(stretch)到超出其通常的纵横比。有关如何 <path> 的更多信息的 d属性作品，看这篇文章:The SVG path Syntax: An Illustrated Guide

然后，您只需将这个简短的 SVG 标记填充为 data:image/svg+xml对于背景容器的背景图片，即:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="green" d="M0,0 L10,0 L10,10 z"></path></svg>');

请看下面的例子:

.wrapper {
  display: flex;
  overflow: hidden;
}

.container-general {
  background-color: black;
  height: 500px;
  width: 70%;
}

.background-general {
  position: relative;
  width: 30%;
  background-color: green;
  overflow: hidden;
}

.background-general__background {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Triangle */
.background-general__background::before {
  content: '';
  display: block;
  flex-grow: 0;
  width: 100%;
  padding-bottom: 173%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="white" d="M0,0 L0,10 L10,10 z"></path></svg>');
  background-size: 100% 100%;
}

/* Extra fill */
.background-general__background::after {
  flex-grow: 1;
  content: '';
  display: block;
  background-color: white;
  
  /* Needed to fix subpixel rendering */
  margin-top: -1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container-general" id="leftdiv">
  </div>
  <div class="background-general" id="rightdiv">
    <div class="background-general__background"></div>
  </div>
</div>