全屏三角半设计

Question

创建具有两列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;
}

Answer 1

我在窗口加载和调整大小时进行了一些数学计算，根据父div的宽度和高度计算对角线长度和旋转角度

  
$(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>