第 16 题：如何通过 CSS 绘制一个三角形？

虽然网上有很多关于绘制三角形的代码，但是我相信还是有一部分人是不知道如何实现的。我下面举个栗子。
这种情况应该都能理解，不就是设置一个边框嘛
width: 100px;height: 100px;border: 20px solid;border-color: #000;box-sizing: border-box;

文章插图
第三步，把边框放大，使得里面的白色区域减少到没有为止
width: 100px;height: 100px;border: 50px solid;border-color: green blue red orange;box-sizing: border-box;

文章插图
就是这么简单，通过 border-color 控制三角形方向，通过 width、height、border 宽度来调整三角形大小和形状
文章的内容/灵感都从下方内容中借鉴

【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues
【大数据可视化图表插件】https://www.npmjs.com/package/ns-echarts
【第 16 题：如何通过 CSS 绘制一个三角形？】【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/