共计 947 个字符，预计需要花费 3 分钟才能阅读完成。
尽管网上有很多对于绘制三角形的代码，然而我置信还是有一部分人是不晓得如何实现的。我上面举个栗子。
这种状况应该都能了解，不就是设置一个边框嘛
width: 100px;
height: 100px;
border: 20px solid;
border-color: #000;
box-sizing: border-box;<img src=”https://noxussj.top:3000/16/1.png”></img>
第二步，把边框色彩改一下，应该也能看懂
width: 100px;
height: 100px;
border: 20px solid;
border-color: green blue red orange;
box-sizing: border-box;<img src=”https://noxussj.top:3000/16/2.png”></img>
第三步，把边框放大，使得外面的红色区域缩小到没有为止
width: 100px;
height: 100px;
border: 50px solid;
border-color: green blue red orange;
box-sizing: border-box;<img src=”https://noxussj.top:3000/16/3.png”></img>
第四步，把其余边框色彩改为通明色试试
width: 100px;
height: 100px;
border: 50px solid;
border-color: green transparent transparent transparent;
box-sizing: border-box;<img src=”https://noxussj.top:3000/16/4.png”></img>
就是这么简略，通过 border-color 管制三角形方向，通过 width、height、border 宽度来调整三角形大小和形态
文章的内容 / 灵感都从下方内容中借鉴
- 【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
- 【大数据可视化图表插件】https://www.npmjs.com/package…
- 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/
正文完
