如何从左下角到右上角创建动态对角线？
我已经创建了一个简单的布局，其中我有三个交互的div。 一个是屏幕中间的徽标，另一个是两个块，jQuery被移出屏幕。 我使用CSS的skew选项来应用学位转换。 我想根据屏幕应用一定程度，所以这个学位将适用于所有屏幕。
可视化示例： http ： //jsfiddle.net/6a93T/1/
现在我有这个代码：
HTML：
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的：
$(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); });
使用三角法计算所需的角度：
var angle = Math.atan2($(window).width(),$(window).height()); // in radians $('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');
（注意对于数学极客和其他学习者：反正切通常会将高度除以宽度，而不是相反。在这种情况下，我们正在倾斜垂直线而不是水平线，所以上面的代码给出了理想的结果。）
请注意，较新版本的jQuery会自动将必要的-webkit-或-moz-前缀添加到该CSS transform属性中。
您可能还希望display:none元素，直到上面的代码可以改变角度，然后在计算角度后立即show()它们：
$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)') .add('#logo').show();
我只是使用这样一个事实：顶部和右边有两个不同边框的DOM元素会产生两条相交的对角线。 然后将DOM-Element的高度和宽度设置为零，并将border-top-width设置为window-height，将border-right-width设置为window-width。 在resize时用JavaScript更新它……就是这样。
我在DOM中放了一个容器
以下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; }
并按照JavaScript来实现resize
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 <3
你不必为此做太多。 在这里看演示
HTML
CSS
.diagonal { width: 0; height: 0; border-top: 110px solid transparent; border-right:110px solid blue; }