全屏三角形設計

創建具有兩列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; 
}

來源

2017-07-18 rev2012

提供您已經嘗試過的代碼。 –

@ rev2012：你真正的意思是「哪一個響應一半的屏幕」？ – talentedandrew

我試圖實現紫羅蘭左下角將始終在屏幕的左下角和右上角將始終在右上方即使屏幕寬度或高度改變 – rev2012

我做了窗口加載一些數學和調整，計算對角線長度和角度取決於父DIV

的寬度和高度旋轉


 
$(document).ready(function() { 
 
    $(window).on('load resize', function(event){ 
 
    \t 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)'); 
 
    }); 
 
});

\t body, html { height:100%;margin:0;padding:0; } 
 
    .t-content { 
 
\t \t width:100%; 
 
\t \t height:100%; 
 
\t \t display:block; 
 
\t \t overflow:hidden; 
 
\t \t background:black; 
 
\t \t position:relative; 
 
\t } 
 

 
\t .t-right { 
 
\t \t width:100%; 
 
\t \t height:100%; 
 
\t \t display:block; 
 
\t \t overflow:hidden; 
 
\t \t background:violet; 
 
\t \t position:absolute; 
 
\t \t bottom:0; 
 
\t \t right:0; 
 
\t \t transform-origin: top right; 
 
\t \t  transform: rotate(-50deg); 
 
\t \t z-index: 100; 
 
\t } 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="t-content"> 
 
\t 
 
\t <div class="t-right"> \t 
 
\t \t \t 
 
\t \t \t 
 
\t </div> 
 
\t 
 
</div>

來源

2017-07-18 13:03:59

完美的解決方案，我一直在尋找 –

全屏三角形設計

回答

相關問題