网页如何使用HTML+CSS实现三角形
今天要和大师分享的是：若何利用CSS3+HTML5画三角形，小编利用border边框来实现，实现的体例良多种！但愿可以或许给你的进修和工作带来帮忙！
东西/原料
- 网页代码编纂器
- HTML5+CSS3
类型一：箭头标的目的上
- 1
实现代码：
width: 0; height: 0;
border-bottom: 100px solid orangered;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
类型二：箭头标的目的下
- 1
实现代码：
width: 0;
height: 0;
border-top: 100px solid orangered;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
类型三：箭头标的目的左
- 1
实现代码：
width: 0; height: 0;
border-right: 100px solid orangered;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
类型四：箭头标的目的右
- 1
实现代码：
width: 0; height: 0;
border-left: 100px solid orangered;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
类型五：直角三角形
- 1
箭头左上
代码：
width: 0;
height: 0;
border: 50px solid orangered;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
- 2
箭头右下
代码：
width: 0;
height: 0;
border: 50px solid orangered;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
注重事项
- 参数可以按照本身的需求点窜！
- 若是帮到您了！但愿能给小编加鸡腿哦（点赞投票撑持）
- 发表于 2019-08-05 23:12
- 阅读 ( 775 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章