css中实现三角形的一些方法

一、border 边框法（最经典、兼容性最佳）

CSS 盒模型中，元素边框的交界处并非直线衔接，而是呈斜向分割的形态。当元素的width与height均设置为 0 时，元素的可视区域完全由四条边框构成，四条边框会各自形成一个方向的三角形。此时将不需要的三条边框设置为transparent（透明），仅保留目标方向的边框，即可得到单个纯色三角形。

二、clip-path 裁剪法（最灵活、现代项目首选）

clip-path是 CSS Masking 模块的核心属性，通过定义裁剪路径控制元素的可视区域，路径外的内容会被完全隐藏。使用其中的polygon()多边形函数，定义三个顶点的坐标，即可将任意矩形元素裁剪为三角形。
坐标规则：polygon(x1 y1, x2 y2, x3 y3)，坐标支持百分比、px 等单位，以元素左上角为坐标原点，x 轴向右延伸，y 轴向下延伸。

三、linear-gradient 线性渐变法

线性渐变linear-gradient支持硬色标（两个色标位置完全重合），此时颜色之间无过渡效果，呈现一条笔直的分界线。通过两个方向相反的线性渐变，各占据元素的一半区域，两条斜边拼接即可构成一个完整的三角形。