css三角形,纯CSS实现的小三角

点评：纯CSS实现的小三角，喜欢的朋友可以参考下。

先看图1效果：

代码如下：

<div style=”border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;”></div>

关键是要知道边框的上下左右四条边框之间的连接处是呈斜线状的，如图2：

然后上面的图1的效果就简单了。上边框宽度是三角的高、边框颜色与背景色相同，下边框同上。左边框宽度与上下边框一样设置，颜色是三角的颜色，即红色。

这个Demo是几种常见三角的写法。

延伸阅读

• 2010-12-9-- 世界精典漫画,一个非常精典的纯CSS漫画，登峰造极.
• 2010-12-9-- 三级下拉菜单代码,纯CSS实现的三级下拉菜单实现代码
• 2010-12-9-- 三级下拉菜单代码,纯CSS实现的三级下拉菜单实现代码
• 2010-12-9-- css滑动门技术,css 滑动门技术的介绍及实例分享
• 2010-12-9-- 世界精典漫画,一个非常精典的纯CSS漫画，登峰造极.
• 2010-12-9-- 纯css圆角,纯DIV+CSS实现圆角代码
• 2010-11-24-- 纯css下拉菜单,一个用纯CSS实现的下拉菜单
• 2010-12-9-- css滑动门,ul结合CSS制作网页相册滑动浏览效果
• 2010-12-9-- css滑动门技术,css 滑动门技术的介绍及实例分享
• 2010-12-9-- css菜单,性感的CSS菜单（Menus）