如何計算右轉換以創建在一定角度使用CSS切除div上的角落

Question

我想創建頁面角落剪貼效果，如turn.js，我知道我需要兩個div，外部需要有正向旋轉裏面一個需要相同數量但負數，並且都需要翻譯，但我不知道如何計算正確的值。

我怎樣才能做到這一點的每個角落？

這裏是my try。

Answer 1

這裏是我的嘗試，爲20像素的截止：

.page-wrapper { 
    position: absolute; 
    overflow: hidden; 
    width: 400px; 
    height: 300px; 
    top: 50px; 
    left: 50px; 
    right: auto; 
    z-index: 12; 
    background-color: blue; 
} 
.outter-wrapper { 
    position: absolute; 
    overflow: hidden; 
    -webkit-transform-origin: 100% 50%; 
    -webkit-transform: translateX(-20px) rotate(45deg); 
    right: 0px; 
    bottom: -100%; 
    width: 200%; 
    height: 200%; 
} 
.inner-wrapper { 
    -webkit-transform-origin: 100% 100%; 
    -webkit-transform: rotate(-45deg) translateX(20px); 
    background-color: yellow; 
    width: 50%; 
    height: 50%; 
    right: 0px; 
    position: absolute; 
    top: 0px; 
} 

你需要讓outter包裝比內包裝大;如果不是，你正在裁剪你沒有打算的地方。我已經完成了20 %%;這種方式數學更容易。

此外，您需要仔細調整它，以便您仍然知道變換原點的座標。

而且你並不需要將它移動到x和y中，它足以將它橫向調整。

demo