工具/材料
电脑
sublime
搜狗浏览器
操作方法
- 01
如图，新建一个HTML5网页，然后设置一个div，一般来说，我们是通过div来写三角的。
- 02
接着开始在style标签里面设置div的样式，把div设置成三角形。
- 03
如图，设置div的width为0,这一点特别重要，待会我再具体分析。
- 04
然后设置border为25像素，solid表示实线，然后边框的颜色是白色的。
- 05
接着我们再另外设置border-bottom-color为红颜色。
- 06
保存好之后，就可以得到一个红色的三角形了，这个三角形其实就是下边框，而上边框和左边框以及右边框因为是白色的，所以看不出来。这样就会给人三角形的感觉。
- 07
接着我们把border中的25px给改成5px,然后保存。
- 08
这时候刷新HTML网页，可以看到，三角形变小了，这就说明通过border，我们可以控制三角形的大小。
- 09
接着我们把width:0注释掉，然后保存HTML网页。
- 10
在浏览器刷新HTML，可以看到原来的三角形已经不再是三角形了，这是因为如果不设置width为0，那么默认width就会自动填满整个浏览器哦。
- 11
接着我们把border-bottom-color改为border-top-color，然后再保存。
- 12
这时候，三角形就倒过来了，此外，我们还可以通过border-left-color和border-right-color来设置左三角形和右三角形哦。
- End
