关于前端:CSS-实现切角效果

欢送关注我的公众号：前端侦探

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

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

一、自适应形式

这种布局个别有两种自适应形式，当然具体须要哪种能够依据理论设计师需要

1. 固定间隔

无论宽高怎么变动，切角间隔顶部的 间隔 是固定的，如下

2. 固定角度

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

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

二、固定间隔的切角

固定间隔的比拟好实现，只须要借助 clip-path 就能够了。假如间隔顶部的间隔是20px，那么四个点的坐标是

代码实现就是

div{clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
}

这样就失去了一个固定间隔的切角

三、固定角度的切角

这个略微简单一点。起初，我认为简略的线性突变就能实现，比方

div{background: linear-gradient(-30deg, #B89DFF 80%, transparent 0);
}

实时成果如下

能够看到，角度尽管是固定的，然而切角不会紧贴右上角，起因是线性突变的起始点是沿着角度与之垂直的最远距离，如下所示（截图取自 MDN 官网）

所以并不能保障切角的固定相交地位，比拟适宜那种小切角场景。

那还有其余形式吗？当然也是有的

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

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

div{background: conic-gradient(#B89DFF 250deg, transparent 0);
}

成果如下

因为锥形突变默认中心点是容器的中点，咱们须要移到右上角，能够通过 at 来指定地位，如下

div{background: conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0);
}

这样就失去了一个固定角度的切角

四、总结一下

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

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

当然不仅仅局限于此，很多不规则布局都能够朝这个方向思考🤔最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探