你的浏览器不支持 impress.js 所要求的特性 by impress.js, 现仅为你提供此次演示的一个简单版本。

想要最好的体验,请使用最新的 Chrome, Safari or Firefox 浏览器。

用 CSS 绘制三角形

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

来看一个具体的示例,一个红色的向右的三角形:

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

先从 div 说起

先创建一个空的 div:

设置一个 1px 的黑色实心边框, 高度和宽度均设置为 100px:


					.arrowRight {
						border: 1px solid black;
						width: 100px;
						height: 100px;
					}
				

增大边框

现在把它的边框增大到 60px:


					.arrowRight {
						border:  1px solid black;
						width: 100px;
						height: 100px;
					}
				

让边框具有不同颜色

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

		
					border: 60px solid;
					border-top-color: blue;
					border-right-color: yellow;
					border-bottom-color: green;
					border-left-color: red;
				

减小 div 的宽度和高度

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


					width: 100px;
					height: 100px;
				

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

拆散成四个 border 的定义

现在把四个 border 分开定义:

		
					border: 60px solid;
					border-top-color: blue;
					border-right-color: yellow;
					border-bottom-color: green;
					border-left-color: red;
				

结果还是类似上一步。

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

只保留 border-left

现在把其它三个 border 定义去掉,只保留 border-left:


					border-top: 60px solid blue; 
					border-right: 60px solid yellow; 
					border-bottom: 60px solid green; 
					border-left: 60px solid red;
				

结果什么也没有了!为什么呢?

只去掉 border-right

现在先恢复原状, 然后只把 border-right 定义去掉:


					 
					border-left: 60px solid red;
				

结果用逐渐减小的宽度模拟,可以看到 border-top 和 border-bottom 的宽度损失了一半!显然它们的宽度是由 border-left 和 border-right 共同决定的!反之,border-left 和 border-right 的高度则由它们决定!双方互为支撑!

继续去掉 border-bottom

现在进一步把 border-bottom 定义去掉:


					border-top: 60px solid blue; 
					border-right: 60px solid yellow; 
					border-bottom: 60px solid green; 
					border-left: 60px solid red;
				

结果用逐渐减小的高度模拟,可以看到 border-top 的高度也因此损失了一半!

所以,如果再继续去掉 border-top,那就全完蛋了!

使用 transparent 属性

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

但又不能显示出来,那么可以使用透明属性:transparent!


					border-top: 60px solid blue; 
					border-right: 60px solid yellow; 
					 
					border-left: 60px solid red;
				

最终结果

最终的代码及结果如下:


					width: 0; 
					height: 0;
					border-top: 60px solid transparent; 
					border-bottom: 60px solid transparent; 
					border-left: 60px solid red;
				

The End,Thank you for watching!

使用空格,箭头或左右按钮(平板)来导航
或使用右下角的按钮导航
或让幻灯片自动播放(单击右下角的播放按钮)
注:部分子步骤不支持回退,需重新刷新页面!