CSS之三角制作原理解析

一、为什么用CSS制作三角，为何不同图片？哪些地方需要用到三角？

1. 使用图片当然也可以，只是页面打开速度会变慢，使用css可以减少http请求以达到节省时间的目的，ps：页面资源的请求有大部分的时间都消耗在http请求上面。在浏览器方面来考虑的话，对于同一域名下的资源请求并发数量有限，请求数过多会导致耗时严重。
2. 哪些地方需要用到三角呢？

         比如：聊天气泡、小米，京东等下拉框会出现三角形等等实际应用。

二、CSS制作三角原理：

我们制作三角其实是利用边框（border） 属性来进行制作，大多数时候我们都是单纯认为边框是一条实线、虚线，点这些，并且平时用的都是同一个颜色这样不好看出来，所以这里我们用四种颜色进行演示

 我们可以看到当内部宽度变小时边框不断的向内部扩张，其实这里可以用极限的思维来进行理解，当宽度为0和高度也为0的情况下：width：0；height：0；也就是说盒子宽高趋近为零时就

会变成下面这个样子：

注意代码是：

 width: 0px;

 height: 0px;

三、那怎样实现三角呢？

其实只需要在不需要的边框加一个透明颜色就可以了（transparent），需要什么三角形就进行相应的更改就可以了。

 便捷代码书写：

 这样还可以设置扇形，只需要CSS里面加这样一段代码：

    border-radius: 50%;

 四、具体怎样运用到实际当中去的呢？

        我们这里以聊天气泡为例：（运用相对定位和绝对定位将三角进行移动和摆放）

	
		
		
	
	
	
		

			CSS聊天气泡
		
	

运行结果：

 五、总结：

还可以通过对四边边框宽度的设置来设置各种不同的三角形，请大家自行下去探索。不懂的可以留言，大家一起讨论。