尽管网上有很多对于绘制三角形的代码,然而我置信还是有一部分人是不晓得如何实现的。我上面举个栗子。
这种状况应该都能了解,不就是设置一个边框嘛
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/