Full screen triangle-half design

Question

what is the best way of create landing page with two columns of divs which has responsive half of screen like this?

What I have so far: 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;
}

@rev2012 : what do you really mean by `which has responsive half of screen` ? — Anurag, Jul 18 '17 at 08:45
I trying to achieve that violet left bottom corner will be always on left bottom of the screen and right top corner will be always on the right top even if screen width or height is changed — rev2012, Jul 18 '17 at 08:49

score 3 · Answer 1 · edited Oct 24 '17 at 11:56

I did some math on window load and resize, calculating the diagonal length and angle to rotate depending upon width and height of parent 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>

Full screen triangle-half design

1 Answers1

Linked