CSS 实现切角效果

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

一、自适应方式

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

1. 固定距离

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

[图片上传失败...(image-b8f937-1654962976061)]

2. 固定角度

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

[图片上传失败...(image-5cc9d1-1654962976061)]

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

二、固定距离的切角

固定距离的比较好实现，只需要借助 clip-path就可以了。假设距离顶部的距离是20px，那么四个点的坐标是

[图片上传失败...(image-108c14-1654962976061)]

代码实现就是

<pre class="css hljs language-css" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">div{
clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
}</pre>

这样就得到了一个固定距离的切角

[图片上传失败...(image-e801b9-1654962976061)]

三、固定角度的切角

这个稍微复杂一点。起初，我以为简单的线性渐变就能实现，比如

<pre class="css hljs language-css" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">div{
background: linear-gradient(-30deg, #B89DFF 80%, transparent 0);
}</pre>

实时效果如下

[图片上传失败...(image-daf414-1654962976061)]

可以看到，角度虽然是固定的，但是切角不会紧贴右上角，原因是线性渐变的起始点是沿着角度与之垂直的最远距离，如下所示（截图取自 MDN 官网）

[图片上传失败...(image-c9fafa-1654962976061)]

所以并不能保证切角的固定相交位置，比较适合那种小切角场景。

那还有其他方式吗？当然也是有的

提到角度，除了线性渐变，还能想到锥形渐变conic-gradient)，可以以某一点绘制锥形图案。假设固定角度是20度，示意如下

[图片上传失败...(image-7dbf67-1654962976061)]

那么，锥形渐变的角度就是 250°（270 - 20），代码实现如下

<pre class="css hljs language-css" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">div{
background: conic-gradient(#B89DFF 250deg, transparent 0);
}</pre>

效果如下

[图片上传失败...(image-f26e2d-1654962976061)]

因为锥形渐变默认中心点是容器的中点，我们需要移到右上角，可以通过at来指定位置，如下

<pre class="css hljs language-css" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">div{
background: conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0);
}</pre>

这样就得到了一个固定角度的切角

[图片上传失败...(image-585468-1654962976061)]

四、总结一下

以上就是这类布局的两种实现方案，主要用到了clip-path和conic-gradient，下面总结一下

1. clip-path 可以根据坐标点裁剪矩形
2. linear-gradient 也能实现切角效果，但并不能紧贴右上角
3. conic-gradient 可以实现实现任意角度的锥形，同时能指定中心点位置

当然不仅仅局限于此，很多不规则布局都可以朝这个方向思考🤔最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤