用 CSS 绘制三角形

什么是用 CSS 绘制的三角形？

来看一个具体的示例：

它是如何用纯 CSS 方式绘制出来的呢？

先从 div 说起

先创建一个 div，高度和宽度均设置为 100px，水平居中，设置背景颜色为红色：

		width:100px;
		height:100px;
		background-color:red;
			

设置边框

现在让我们为它设置一个 5px 的边框，然后让它逐渐增大到 40px：

		border:40px solid black;
			

让边框具有不同颜色

现在让各个边框具有不同的颜色：

		border:40px solid;
		border-top-color: blue;
		border-right-color: yellow;
		border-bottom-color: green;
		border-left-color: pink;
			

减小 div 的宽度和高度

现在，把 div 的宽度和高度逐渐减小，直至到 0!

三角形出现了！不过有四个!

		width: 0; 
		height: 0;
			

拆散成四个 border 的定义

现在把四个 border 分开定义，结果还是类似上一步：

		border-top: 40px solid blue; 
		border-right: 40px solid yellow; 
		border-bottom: 40px solid green; 
		border-left: 40px solid pink;
			

现在如果只想要一个向右的箭头，是否只要保留 border-left 的定义即可了呢？让我们试试！

只保留 border-left

现在把其它三个 border 定义去掉，结果你看到什么了？！

如果你什么也没有看到，那就对了！为什么呢？

		border-left: 40px solid pink;
			

只去掉 border-right

现在恢复原状，先只把 border-right 定义去掉，结果则如下！

border-top 和 border-bottom 的宽度损失了一半！显然它们的宽度是由 border-left 和 border-right 共同决定的！反之，border-left 和 border-right 的高度则由它们决定！双方互为支撑！

		border-top: 40px solid blue; 
		border-bottom: 40px solid green; 
		border-left: 40px solid pink;
			

继续去掉 border-bottom

现在进一步把 border-bottom 定义去掉，结果则如下！

则剩下的 border-top 和 border-left 的宽度和高度均受到了影响！

所以，如果继续再去掉一个，那就全完蛋了！

		border-top: 40px solid blue; 
		border-left: 40px solid pink;
			

使用 transparent 属性

要维持住 border-left 的高度，我们要保留 border-top 和 border-bottom！

但又不能显示出来，那么可以使用透明属性：transparent！

你还是看到有红色，对吧！因为我们之前定义了背景颜色！

		background-color: red;
		border-top: 40px solid transparent; 
		border-bottom: 40px solid transparent; 
		border-left: 40px solid pink;
			

最终结果

现在把 div 的背景颜色也去掉！就 OK 啦！

		width: 0; 
		height: 0;
		border-top: 40px solid transparent; 
		border-bottom: 40px solid transparent; 
		border-left: 40px solid pink;
			

The End，Thank you for watching！