创建具有两列 div 且具有像这样的响应式一半屏幕的登陆页面的最佳方法是什么?
到目前为止我所拥有的:http://jsbin.com/kuxizepiqo/edit?html,css,output
.t-content {
width:100%;
height:100%;
display:block;
overflow:hidden;
background:black;
position:relative;
}
.t-right {
width:100%;
height:100%;
display:block;
overflow:hidden;
background:violet;
position:absolute;
bottom:0;
right:0;
transform-origin: top right;
transform: rotate(-50deg);
z-index: 100;
}
最佳答案
我对窗口加载和调整大小做了一些数学计算,根据父 div 的宽度和高度计算对 Angular 线长度和旋转 Angular
$(document).ready(function() {
$(window).on('load resize', function(event){
var tRightWidth, tContent = $('.t-content');
tRightWidth = Math.sqrt(Math.pow(tContent.width(), 2) + Math.pow(tContent.height(), 2));
$('.t-right').css('width', tRightWidth);
var angle = Math.atan(tContent.height() / tContent.width());
angle = angle * 180 / Math.PI
$('.t-right').css('transform','rotate(-'+angle+'deg)');
});
});
body, html { height:100%;margin:0;padding:0; }
.t-content {
width:100%;
height:100%;
display:block;
overflow:hidden;
background:black;
position:relative;
}
.t-right {
width:100%;
height:100%;
display:block;
overflow:hidden;
background:violet;
position:absolute;
bottom:0;
right:0;
transform-origin: top right;
transform: rotate(-50deg);
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t-content">
<div class="t-right">
</div>
</div>
关于html - 全面屏三 Angular 半设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45161025/