纯CSS实现箭头【上升、下降】_hao是很好的郝

个人资料

微博

正文字体大小：大中小

纯CSS实现箭头【上升、下降】

(2013-11-28 15:35:28)

分类：网站前端

纯CSS实现箭头，如图所示：

http://s16/mw690/001Uaenzty6EzGz2iBxff&690
CSS代码：

.pointer{width:10px; height: 12px;}

.pointerUpT{border-width: 0 4px 5px 4px;border-color: #fff #fff #ff0000 #fff;border-style:solid;height: 0; width: 0;}

.pointerUpL{width:2px; height: 6px; background-color: #ff0000; margin-left: 3.0px;}

.pointerDownT{border-width: 5px 4px 0 4px;border-color:#bab5b5 #fff #fff #fff;border-style:solid;height: 0; width: 0;}

.pointerDownL{width:2px; height: 6px; background-color: #bab5b5; margin-left: 3.0px;}

HTML代码：

http://s16/mw690/001Uaenzty6EzGJt12T1f&690

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report