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

今天要和大师分享的是：如何利用CSS3+HTML5画三角形，小编利用border边框来实现，实现的体例良多种！但愿可以或许给你的进修和工作带来帮忙！

工具/原料

• 网页代码编纂器
• HTML5+CSS3

类型一：箭头标的目的上

1. 1

   实现代码：

   width: 0; height: 0;

   border-bottom: 100px solid orangered;

   border-left: 50px solid transparent;

   border-right: 50px solid transparent;

   

类型二：箭头标的目的下

1. 1

   实现代码：

   width: 0;

   height: 0;

   border-top: 100px solid orangered;

   border-left: 50px solid transparent;

   border-right: 50px solid transparent;

   

类型三：箭头标的目的左

1. 1

   实现代码：

   width: 0; height: 0;

   border-right: 100px solid orangered;

   border-top: 50px solid transparent;

   border-bottom: 50px solid transparent;

   

类型四：箭头标的目的右

1. 1

   实现代码：

   width: 0; height: 0;

   border-left: 100px solid orangered;

   border-top: 50px solid transparent;

   border-bottom: 50px solid transparent;

   

类型五：直角三角形

1. 1

   箭头左上

   代码：

   width: 0;

   height: 0;

   border: 50px solid orangered;

   border-right: 50px solid transparent;

   border-bottom: 50px solid transparent;

   
2. 2

   箭头右下

   代码：

   width: 0;

   height: 0;

   border: 50px solid orangered;

   border-right: 50px solid transparent;

   border-bottom: 50px solid transparent;

   

注重事项

• 参数可以按照本身的需求点窜！
• 若是帮到您了！但愿能给小编加鸡腿哦（点赞投票撑持）