css3立体三角,利用CSS3新特性创建透明边框三角

先来看一下效果，这在CSS3之前，完全是不可想象的，只有图片才能做的到，但在HTML5和CSS3大行其道的今天，实现这种效果，那都不是事啊。

看一下实现的代码：

/* 上三角 */

.arrow-up {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-bottom: 20px solid green;

}

/* 下三角 */

.arrow-down {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid orange;

}

/* 右三角 */

.arrow-right {

width: 0;

height: 0;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid blue;

}

/* 左三角 */

.arrow-left {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid silver;

}