css3写小三角 |css3 滑动图片轮播

css解析url，css写选择文件，css3 图片遮盖，css蓝色字体背景颜色，css的滑动门理解，jsp中css字体放大缩小，css3 滑动图片轮播 css3写小三角 |css3 滑动图片轮播

.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f00;
}

上面的代码可以创建一个红色的往下的小三角。其中，width和height都为0，是因为大家只需要利用CSS3的border来创建边框。border-left和border-right设置为透明，这样就只有border-bottom显示出来，即形成三角形。

如果要创建其他颜色、方向的小三角，只需要调整border的方向和颜色就可以了。

.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #0f0;
}

上面的代码可以创建一个绿色的往右的小三角。与之前的代码类似，只是改了border的方向和颜色。

利用CSS3创建小三角并不难，但要注意的一点是，它只在支持CSS3的现代浏览器上才能完美显示。对于那些老旧的浏览器，需要提供一些备选方案。