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