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

Posted 2023-03-23

【中文标题】如何使用 CSS 计算正确的变换以在 div 上以特定角度创建切角

【英文标题】：How to calculate right transformation to create cut off the corner on the div in certain angle using CSS

【发布时间】：2013-07-23 12:39:08

【问题描述】：

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

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

这里是my try。

【参考方案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