程序员的技术干货，如何用HTML＋CSS代码绘制任意方向的三角形？

关注小编查看简介，有你不知道的小秘密

近期正在忙制作一个网站项目，其中涉及到一段代码，一段需要绘制“三角形”的代码。本着对用户负责的态度，没有使用png作为背景图片的技术形式，而是决定纯手工写一个三角形出来。那么，问题来了？如何写一个三角形？

我们知道，现在的网页代码处于HTML5+CSS3技术时代，在这个技术模式下，所有的网页布局都是基于div这个标签下的。div在正常模式下，是一个矩形，如果不给予任何特殊的效果，这个div就是一个直角矩形。我们尝试写如下样式的代码：

这样的代码，浏览器就会呈现一个背景色是“黑色”的正方形，然后我们继续给这个div添加其他样式，代码如下：

如上的代码，浏览器中会呈现一个下图效果的图形，中间还是那个黑色背景色的矩形，然后上下左右分别出现了4种不同颜色的border边框。

这个技术原理是基于网页代码中的“盒子模式”，在以上代码中我们可以看出，当盒子内容的宽度和高度远小于边框的时候，边框的显示为等腰梯形。若是将盒子的宽度和高度都设置为“0”，那么代表盒子内容的黑色正方形就会消失。代码如下：

然后，就会呈现如下效果的图形——4个三角形拼成的正方形。

关注小编查看简介，有你不知道的小秘密哦

若是只需要其中一个三角形，代码应该如何修改？

接下来，干货来了。一定要记住如下结论：

三角形中直角朝向不要出现在border方向中。如，要绘制一个直角朝向左的三角形，那么在style中的“border-left”这行代码就要删除。

三角形中直角朝向的反方向border要保留不动。如，还是那个直角朝向左的三角形，那么“border-right”这行代码就不要做任何变动。

其余border的颜色代码改为“transparent”。如，border-top: 50px solid transparent 。

那么，看写好后的代码。四个朝向的三角形。

1、直角向上。

2、直角向下。

3、直角向左。

4、直角向右。

记得关注小编，查看简介哦！