《Stunning CSS3》学习笔记之CSS绘制箭头方法

CSS可以利用边框来绘制三角形箭头，其方法和原理描述如下（注：这不是CSS3特有的，在以前的CSS版本中就可以这样做）

<div style="width: 100px; height: 100px; border: 20px solid blue; border-top: 20px solid red;"></div>

在浏览器中执行以上代码可以看到如下效果，可以看到上方边框相交处形成了倾斜的边缘。

 

如果将DIV块的长宽设置为0，你将得到以下的图形。

<div style="width: 0; height: 0; border: 30px solid blue; border-color: red green blue orange;"></div>

可以看到一个由四个小三角组成的正方形。

 

到这里就很明了了，只要将其它三个三角形设置为透明就可以得到我们所需要的三角形小箭头。

<div style="width: 0; height: 0; border: 30px solid blue; border-color: transparent green transparent transparent;"></div>

只要通过对各边框粗细的设置，我们就可以得到任意形状的三角形小箭头。

 

以下是各种三角形的示例：

 

 

 

 

 

转载于:https://www.cnblogs.com/RedHood/archive/2013/02/15/2912707.html