福州seo|福建seo >> 福州SEO优化 >> 怎么用纯css写一个三角形小图标?三角形小图标的CSS写法

怎么用纯css写一个三角形小图标?三角形小图标的CSS写法

作者:SEO技术 分类: 福州SEO优化 发布于:2015-7-30 10:21 ė598次浏览 60条评论
在网页设计的时候,我们往往会碰到比较多的倒立的三角形小图标。这种情况一般出现在有下拉导航的网站上,那如何用CSS来表达这个倒小角形呢?


有人也许会说我不会用CSS来写这种图标,但我可以用图片以背景的形式显示出来。当然这也是一种解决方法,但如果网站上这种图标比较多的话,每个图标都是一个图片。网站加载的时候光加载这些小图标就需要耗掉很多节点,而CSS却不存在这个问题。当网站信息量大的时候,用纯CSS来写这种小图标的优越性就明显了。当然小网站也同样可以用CSS来表现图标,毕竟蚊子肉也是肉。
 好了,言规正转。上代码
        <div class="head_rig">
            <ul>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息<span>1</span></a></li>
                <li><a href="#">最近浏览<em></em></a></li>
                <li><a href="#">我是商家<em></em></a></li>
                <li><a href="#">商家入驻<em></em></a></li>
            </ul>
        </div>
css代码如下:
.head_rig ul li em{
    border-color: #858593 #f0f0f0 #f0f0f0 #f0f0f0;
    border-image: none;
    border-style: solid;
    border-width: 3px;
    font: 0px/0 "宋体";
    position:absolute;
    top:15px;
    left:-15px;
}
这里的小图标是朝下的css,如果你需要朝其他方向,修改地方在css的border-color:它从左到右的方向是: 上,右,下,左;根据自己的需要修改。

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部