Javascript 如何创建从左下角到右上角的动态对角线？

我已经创建了一个简单的布局，其中我有三个相互作用的div。一个是屏幕中间的标识，另一个是JQuery从屏幕上移出的两个块。我使用CSS中的

skew

选项来应用度转换。我想根据屏幕应用一定程度，因此此程度将正确应用于所有屏幕

可视示例：

目前，我有以下代码：

HTML:

jQuery：

$(document).ready(function(){

    /*$("button").click(function() */
        setTimeout(function(){

        $("#blocktop").animate({
        left: '-120%',
        opacity: '0'},
        800
      );

        $("#blockbottom").animate({
        right: '-120%',
        opacity: '0'},
        800
      );


        $('#logo').fadeOut('700')
    },2000);

}); 

---

我只是使用了这样一个事实，一个DOM元素的顶部和右侧有两个不同的边界，结果是在这两个元素相交的地方形成一条对角线。然后将DOM元素的高度和宽度设置为零，并将border top width设置为window height，将border right width设置为window width。在调整大小时使用JavaScript更新它。。。就这些

我在DOM中放置了一个容器

<div id="diagonal_outer"><div id="diagonal"></div></div>

并遵循JavaScript在调整大小时实现

jQuery(document).ready(function() {
    diagonal();
});

jQuery(window).resize(function() {
    diagonal();
});

var diagonal = function() {
    var wWidth = jQuery(window).width();
    var wHeight = jQuery(window).height();

    jQuery('#diagonal').css('left', 0);
    jQuery('#diagonal').css('top', 0);
    jQuery('#diagonal').css('margin-left', 0);
    jQuery('#diagonal').css('margin-top', 0);

    jQuery('#diagonal').css('border-right-width', wWidth);
    jQuery('#diagonal').css('border-top-width', wHeight);
};

---

好的，CSS-skew的解决方案很好，但是这个解决方案与CSS一起使用，使用三角学来计算所需的角度：

var angle = Math.atan2($(window).width(),$(window).height()); // in radians
$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');

（数学怪人和其他学究注意：反正切通常取高度除以宽度，而不是相反。但是，在这种情况下，我们将垂直线而不是水平线倾斜，因此上面的代码给出了所需的结果。）

请注意，较新版本的jQuery会自动将必要的

-webkit-

或

-moz-

前缀添加到CSS

transform

属性中

您可能还希望

显示：无

元素，直到上述代码可以改变角度，然后

显示（）

在计算角度后立即显示它们：

$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
    .add('#logo').show();

---

你不必为此做太多。看

HTML

<div class="diagonal"></div>

---

更新以说明

skew

的实际行为。事实证明，你可以输入

skew

弧度或度数——男孩，这是否简化了事情。@Blazemonger我从你的示例中复制了确切的代码，但我的三角形角度不正确。知道这是为什么吗？@Shniper如果你只提供一个截图而不是源代码，我不能提供任何建议。答案很好，但它能动画化吗？您的演示没有。@Blazemonger是的，这是可能的。只需使用我在JS函数“diagonal”中设置的CSS属性来设置动画。@Algorhytim感谢您的回答，为了更好地理解它，我想知道为什么每个变量末尾都有-1：var wHeight=jQuery（window）.height（）-1；其余的我或多或少都能理解。@DanielRamirez Escudero您可以不使用-1，在较旧的jQuery版本中，$（window）.width（）函数在某些浏览器中给出的值不正确。我通过减去1优化了这个事实。这不是真的。这是一个很好的答案。“狼我喜欢你的CSS唯一的输入，但与颜色的线应该只在中间，而不是有两种颜色的屏幕分裂。”

var angle = Math.atan2($(window).width(),$(window).height()); // in radians
$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');

$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
    .add('#logo').show();

<div class="diagonal"></div>

.diagonal {
    width: 0; 
    height: 0; 
    border-top: 110px solid transparent;
    border-right:110px solid blue; 
}