daily pastebin goal
52%
SHARE
TWEET

Untitled

a guest Feb 12th, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="triangleWrap">
  2.     <div class="borderTopLeft"></div>
  3.     <div class="borderBottomLeft"></div>
  4. </div>
  5.  
  6. <div class="main"></div>
  7.    
  8. $('document').ready(function triangleCalc() {
  9.     var bodyWidth = $('body').width();
  10.     var bodyHeight = $(window).outerHeight();
  11.     var mainWidth = $('.main').width();
  12.     var bodyMinusMain = (bodyWidth - mainWidth) / 2;
  13.     var bodyHeightCalc = bodyHeight / 2;
  14.     $('.borderTopLeft, .borderBottomLeft').css('border-right', bodyMinusMain + 'px solid black');
  15.     $('.borderTopLeft').css('border-bottom', bodyHeightCalc + 'px solid transparent');
  16.     $('.borderBottomLeft').css({
  17.         'border-top': bodyHeightCalc + 'px solid transparent',
  18.         'top': bodyHeightCalc + 'px'
  19.     });
  20.     $(window).resize(triangleCalc);
  21. });​
  22.    
  23. .borderTopLeft, .borderBottomLeft{
  24.     width: 0;    
  25.     height: 0;    
  26.     position: absolute;
  27. }
  28. .borderTopLeft{border-top: 0 solid transparent;}
  29. .borderBottomLeft{border-bottom: 0 solid transparent;}
  30. .borderTopLeft{
  31.     border-bottom: 500px solid transparent;      
  32.     border-right:438px solid #2C2C2C;
  33. }
  34. .borderBottomLeft{
  35.     border-top: 500px solid transparent;  
  36.     border-right: 600px solid #2C2C2C;
  37.     top: 500px;
  38. }
  39. .main{width:500px;height:400px;background:orange;margin:auto;}
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top