CSS 实现切角效果

最近项目中看到这样的一个切角效果，如下所示

就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？

一、自适应方式

这种布局一般有两种自适应方式，当然具体需要哪种可以根据实际设计师需求

1. 固定距离

无论宽高怎么变化，切角距离顶部的距离是固定的，如下

2. 固定角度

无论宽高怎么变化，切角与顶部的夹角是固定的，如下

下面具体来看这两种布局的实现

二、固定距离的切角

固定距离的比较好实现，只需要借助