box 切直角css

Box 切直角是 CSS 中常见的一个技巧，它可以让一个元素的角变得更加直接，更加几何化。下面就来讲解怎样使用 CSS 实现 Box 切直角。

.Box {
    width: 200px;
    height: 100px;
    background-color: #E1E1E1;
    border-radius: 10px;
}

上面的代码就是一个简单实现 Box 切直角的例子。其中，border-radius 属性就是关键，它可以设置元素四个角的弧度大小，从而实现圆角或直角效果。

当我们希望元素只有部分角落是直角时，可以使用伪类 ::before 和 ::after 以及 transform 属性来实现。例如，下面的代码可以让一个含有两个直角和两个圆角的元素。

.Box {
    width: 200px;
    height: 100px;
    background-color: #E1E1E1;
    position: relative;
}
.Box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background-color: #FFFFFF;
    transform: skew(-20deg);
    border-top-left-radius: 10px;
}
.Box::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    background-color: #FFFFFF;
    transform: skew(20deg);
    border-bottom-right-radius: 10px;
}

这段代码中，我们使用了 ::before 和 ::after 两个伪类来创建出两个直角。在这两个伪类中，我们使用了 transform 属性来进行倾斜，从而实现要求的角度大小。同时，使用 border-top-left-radius 和 border-bottom-right-radius 属性来设置对应直角的圆角半径。