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

Question

I've created a simple layout where I have three divs which interact. 我创建了一个简单的布局，其中有三个div相互作用。 One is the logo in the middle of the screen and the other are two blocks which with jQuery are moved out of the screen. 一个是屏幕中间的徽标，另一个是两个块，jQuery被移出屏幕。 I used the skew option from CSS to apply a degree transformation. 我使用CSS的skew选项来应用学位转换。 I would like to apply the certain degree depending on the screen, so this degree will apply to all screens correctly. 我想根据屏幕应用一定程度，所以这个学位将适用于所有屏幕。

Visual example: http://jsfiddle.net/6a93T/1/ 可视化示例： http ： //jsfiddle.net/6a93T/1/

For now I have this code: 现在我有这个代码：

HTML: HTML：

<html>
    <header>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/jq.animation.js"></script>
    </header>
    <body>
        <div id="preloader">
            <div id="blocktop"></div>
            <div id="logo"></div>
            <div id="loadline"></div>
            <div id="blockbottom"></div>
        </div>
    </body>
</html>

CSS: CSS：

html{
    overflow: hidden;
}


#preloader{
    width: 100%;
    height: 100%;
}

#logo{
    background-image: url('../img/logotest.png');
    width: 300px;
    height: 300px;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    z-index: 1000;
}


#blocktop{
    background-color: #fff4ed;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -50%;
    z-index: 10;

    transform: skew(-45deg);
     -o-transform: skew(-45deg);
     -moz-transform: skew(-45deg);
     -webkit-transform: skew(-45deg);
}

#blockbottom{
    background-color: #ff7f33;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: -50%;

    transform: skew(-45deg);
     -o-transform: skew(-45deg);
     -moz-transform: skew(-45deg);
     -webkit-transform: skew(-45deg);

}

jQuery: 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);

});

Answer 1

Use trigonometry to compute the desired angle: 使用三角法计算所需的角度：

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

(Note for math geeks and other pedants: the arctangent would normally take the height divided by the width, not the other way around. In this case, however, we're skewing a vertical line instead of a horizontal one, so the above code gives the desired result.) （注意数学极客和其他学生：反正切通常会将高度除以宽度，而不是相反。在这种情况下，我们正在倾斜垂直线而不是水平线，所以上面的代码给出了理想的结果。）

Note that newer versions of jQuery will automatically add the necessary -webkit- or -moz- prefix to that CSS transform property. 请注意，较新版本的jQuery会自动将必要的-webkit-或-moz-前缀添加到该CSS transform属性中。

You might also want to display:none the elements until the above code can alter the angle, and then show() them immediately after the angle is computed: 您可能还希望display:none元素，直到上面的代码可以改变角度，然后在计算角度后立即show()它们：

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

http://jsfiddle.net/mblase75/6a93T/10/ http://jsfiddle.net/mblase75/6a93T/10/

Answer 2

I just use the fact that a DOM-Element with two different border for top and right results in a diagonal line where both meet. 我只是使用这样一个事实：顶部和右边有两个不同边框的DOM元素会产生两条相遇的对角线。 Then put the height and width of the DOM-Element to zero and set the border-top-width to window-height and the border-right-width to window-width. 然后将DOM-Element的高度和宽度设置为零，并将border-top-width设置为window-height，将border-right-width设置为window-width。 Update it with JavaScript on resize... That's all. 在调整大小时用JavaScript更新它......就是这样。

I've put a container in the DOM 我在DOM中放了一个容器

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

Following CSS is nessesary 以下CSS是必须的

div#diagonal_outer {
    position: fixed !important;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -100;
}
div#diagonal {
    position: relative;

    border-color: #FAE9E1 #ffffff;
    border-style: solid;
    border-left-width: 0;       
    border-top-width: 10240px;
    border-right-width: 12800px;
    border-bottom-width: 0;

    height: 0;
    width: 0;

    left: 50%;
    top: 50%;
    margin-left: -6400px; /* half of border-right-width */
    margin-top: -5120px; /* half of border-top-width */

    z-index: -100;
}

and following JavaScript to actualize on resize 并按照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);
};

OK, the solution with CSS-skew is nice, but this one works with CSS <3 好吧， CSS-skew的解决方案很不错，但是这个解决方案适用于CSS <3

Answer 3

You don't have to do too much for this. 你不必为此做太多。 See demo here 在这里看演示

HTML HTML

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

CSS CSS

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

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

问题描述

3 个解决方案

解决方案1
13 已采纳 2013-01-07 17:05:24

解决方案2
6 2013-01-07 17:01:06

解决方案3
2 2013-01-07 17:22:13

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

问题描述

3 个解决方案

解决方案1 13 已采纳 2013-01-07 17:05:24

解决方案2 6 2013-01-07 17:01:06

解决方案3 2 2013-01-07 17:22:13

解决方案1
13 已采纳 2013-01-07 17:05:24

解决方案2
6 2013-01-07 17:01:06

解决方案3
2 2013-01-07 17:22:13