css - 如何使用 CSS 计算正确的变换以在 div 上以特定角度创建切角

Question

我想在turn.js中创建页面角剪辑的效果，我知道我需要两个 div，外部一个需要正向旋转，内部一个需要相同数量但负数，并且都需要翻译，但我不需要知道如何计算正确的值。

我怎样才能为每个角落做到这一点？

这是我的尝试。

Answer 1

这是我的尝试，截断 20px：

.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;
}

您需要使外包装比内包装大；如果不是，您将在您不想要的地方进行剪辑。我已经完成了 20%%；这样数学就更容易了。

此外，您需要仔细调整它，以便您仍然知道变换原点的坐标。

而且你真的不需要在 x 和 y 中移动它，水平地移动它就足够了。

演示