保持 CSS 三角形角度响应答案

【问题标题】：Keep CSS triangle angle on responsive保持 CSS 三角形角度响应
【发布时间】：2016-07-14 15:24:43
【问题描述】：

这里是 JS 小提琴：

我想要的是对角始终为 45 度，宽度始终为 66.6%。因此，高度需要根据宽度动态调整。

我有：

$(window).load(function() {
    var height = document.getElementById(".tri").height();
    var width = document.getElementById(".tri").width();

    document.getElementById(".tri").style.border-top = (width / tan(45));
});

如您所见，我可以使用 trig 来计算高度，但函数不起作用？！

【问题讨论】：

您不应该同时使用调整大小功能和加载功能
...哦，高度和宽度不都是0吗？
......还有一个.......tri是一个类......不是一个ID。
如果你检查 div，它们都是 500px。
fiddle.jshell.net/:58 Uncaught ReferenceError: Invalid left-hand side in assignment

标签： javascript jquery html css trigonometry

【解决方案1】：

如果我没看错你的问题，这小提琴应该是你所追求的：https://jsfiddle.net/qkmzp1jj/

我所做的是：

新建一个获取窗口宽度的函数（注意：不是元素的宽度）;
计算该宽度的 2/3 是多少；和
然后应用两侧的边框宽度。

然后在 document.(ready) 函数中引用此函数以用于页面加载，window.(resize) 函数用于调整窗口大小（例如移动用户旋转其设备）。

【讨论】：

【解决方案2】：

我所做的改变：

jQuery 选择器
使用outerWidth() 和outerHeight() 而不是width() 和height()
更改 jQuery 样式的 css
将Math. 添加到tan()
将类更改为 id

width() 和 height() 函数返回 0，因为您在 CSS 中将其设置为 0。 outerWidth() 和 outerHeight() 将返回预期值。
您还必须添加一个 onResize 事件处理程序来对窗口调整大小做出反应。

$(window).load(function() {
  var height = $("#tri").outerHeight();
  var width = $("#tri").outerWidth();
  $("#tri").css("border-top", (width / Math.tan(45)) + "px solid black");
});

#tri {
  width: 0;
  height: 0;
  border-top: 500px solid black;
  border-right: 500px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tri"></div>

【讨论】：