很多刚学 CSS 的人会觉得CSS 不就是加样式、写文字吗还能画画 其实我们利用 CSS 的边框、背景渐变、裁剪属性我们不用图片也能画出三角形。方法一border 边框1.原理我们平时用边框也就是给方块加上边里面都有内容或者宽高。但是如果我们此时把宽高设置为0把边框设置成30px此时的边框你可以把一个元素的「四条边框」想象成四块三角形拼在一起的方框当元素的width 和height都设为0时元素本身没有内容区域只剩下四条边框四条边框在角落处是斜着拼接的每一条边框本身就是一个三角形我们可以把四条边框设置成不同的颜色这样更直观2.如何设置核心内容必须把元素宽高设为 0否则会有内容区域边框就不是三角形了。设置边框宽度数值越大三角形越大。边框的颜色设置边框宽度数值越大三角形越大想要三角形朝上就只给下边框上色其他三边透明想要三角形朝右就只给左边框上色其他三边透明以此类推改颜色位置就能切换三角形方向。我们只保留其中一条边框的颜色把另外三条设为「透明色」剩下的就是一个三角形如果想画直角三角形只保留相邻两条边框的颜色即可方法二linear-gradient 背景渐变1.原理在了解怎么画三角形前我们可以先了解一下背景颜色的渐变这个属性属性名就是背景background属性值为linear-gradient在这个括号里面我们需要先填写角度单位是deg然后用逗号隔开填写颜色和它的位置还是用逗号隔开填写下一个颜色的渐变位置。下面这张图片里面的意思就是角度倾斜180度第一个颜色为红色0-20%纯红色 20~40%从红色到蓝色的渐变 40%的位置纯蓝色 40%~70%蓝色到黄色的渐变 70%到结尾位置 纯黄色。2.如何设置正常的渐变是颜色慢慢过渡但如果我们让两种颜色在同一个位置突变当只设置两个颜色并且百分值都填50%就会形成一条笔直的分界线再调整渐变的角度这条分界线就能斜着把方块切成两半其中一半用透明色另一半上色就得到了三角形。填写从四个角开始渐变的角度才有三角形的效果方法三clip-path 裁剪1.原理通过裁剪的方式实现三角形效果clip-pathpolygon剪裁这个属性括号里面填写的就是坐标我们把它所在的元素看作一个方形。这个方形的左上角就是这个坐标系的原点X 轴是水平向右值从0% 到100%Y轴是垂直向下值从0% 到100%。第一个值表示水平方向坐标第二个值表示垂直方向坐标然后依次填写要裁剪的坐标2.如何设置polygon()里按顺序写每个顶点的坐标格式是x轴位置 y轴位置坐标系元素左上角是0% 0%右下角是100% 100%第一个值是水平方向左右第二个值是垂直方向上下顶点按顺序连接最后一个点会自动和第一个点闭合。直接填写坐标就可以了