最近在做项目看到这样一个切角效果，如下图：是一个普通的矩形，然后被“切”了一块，就这样了是沿着右上角切割。那么，如何实现这种布局呢？1.自适应方式这种布局一般有两种自适应方式。当然，具体需要哪一种可以根据设计者的实际需要来决定。1.固定距离无论宽高如何变化，切角与顶部的距离是固定的，如下：2.固定角度无论宽高如何变化，切角与顶部的夹角是固定的，如下：下面详细看一下这两种布局的实现。2.定距切角实现定距更容易，使用clip-path[1]即可。假设距顶部的距离为20px，那么四个点的坐标为：代码实现为：div{clip-path:polygon(020px,100%0,100%100%,0100%);定距倒角：三、定角度倒角这个稍微复杂一点。一开始以为可以实现一个简单的线性渐变，比如：div{background:linear-gradient(-30deg,#B89DFF80%,transparent0);}实时效果如下：可以看到虽然角度是固定的，但是切角并没有粘在右上角，因为线性渐变的起点是沿着垂直于它的角度最远的距离，如下图（MDN官网截图）.因此不能保证切角的固定交点位置，更适合小切角场景。还有其他方法吗？当然有。说到角度，除了线性渐变，还可以想到conic-gradient[2]，它可以在某一点画出圆锥形的图案。假设固定角度为20度，示意图如下：那么，圆锥渐变的角度为250°（270-20），代码实现如下：div{background:conic-gradient(#B89DFF250deg,transparent0);}效果如下：因为锥形渐变的默认中心点是容器的中点，所以我们需要移动到右上角，位置可以通过at指定，如如下：div{背景：圆锥梯度（100%0，#B89DFF250deg，透明0）；这样就得到了固定角度的倒角。4.总结以上是这类布局的两种实现，主要使用clip-path和conic-gradient。总结一下：clip-path可以根据坐标点切割矩形。linear-gradient也可以实现切角效果，但是不能靠近右上角。conic-gradient可以实现任意角度的圆锥形状，同时可以指定中心点的位置。参考文献[1]clip-path:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path[2]conic-gradient:https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()
