网页如何使用HTML+CSS实现三角形

今天要和大家分享的是：如何使用CSS3+HTML5画三角形，小编使用border边框来实现，实现的方式很多种！希望能够给你的学习和工作带来帮助！

工具/原料

网页代码编辑器

HTML5+CSS3

类型一：箭头向上

实现代码：width: 0; height: 0; border-bottom: 100px solid orangered; border-left: 50px solid transparent; border-right: 50px solid transparent;

类型二：箭头向下

实现代码：width: 0; height: 0; border-top: 100px solid orangered; border-left: 50px solid transparent; border-right: 50px solid transparent;

类型三：箭头向左

实现代码：width: 0; height: 0; border-right: 100px solid orangered; border-top: 50px solid transparent; border-bottom: 50px solid transparent;

类型四：箭头向右

实现代码：width: 0; height: 0;border-left: 100px solid orangered;border-top: 50px solid transparent;border-bottom: 50px solid transparent;

类型五：直角三角形

箭头左上代码：width: 0; height: 0; border: 50px solid orangered; border-right: 50px solid transparent; border-bottom: 50px solid transparent;

箭头右下代码：width: 0;height: 0;border: 50px solid orangered;border-right: 50px solid transparent;border-bottom: 50px solid transparent;

注意事项

参数可以根据自己的需求修改！

如果帮到您了！希望能给小编加鸡腿哦（点赞投票支持）

欧尼酱