【问题标题】：How to calculate right transformation to create cut off the corner on the div in certain angle using CSS如何使用 CSS 计算正确的变换以在 div 上以特定角度创建切角
【发布时间】：2013-07-23 12:39:08
【问题描述】：

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

如何为每个角落执行此操作？

这里是my try。

【问题讨论】：

标签： css algorithm css-transforms clipping

【解决方案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;
}

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

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

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

demo

【讨论】：