在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了css3后很多变得方便了，比如要在li列表的每行文字的前面加个小三角，可以这么写：

<!DOCTYPE html>

<html>

<head>

    <meta charset="gb2312">

    <title>ces</title>

    <style>

        a{ text-decoration: none; color: #666; }

        ul{ list-style: none; }

        ul li{ margin-left: 10px; position: relative; }

        li::before{

            content: "";

            border: solid 4px;

            border-color: transparent transparent transparent #666;

            width: 0px;

            height: 0px;

            position: absolute;

            left: -6px;

            top: 6px;

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="#">列表列表列表列表列表列表</a></li>

        <li><a href="#">列表列表列表列表列表列表</a></li>

        <li><a href="#">列表列表列表列表列表列表</a></li>

        <li><a href="#">列表列表列表列表列表列表</a></li>

        <li><a href="#">列表列表列表列表列表列表</a></li>

        <li><a href="#">列表列表列表列表列表列表</a></li>

    </ul>

</body>

</html>

效果便如上所示，方框包围的小三角就是。

纯css制作小三角的更多相关文章

  1. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  2. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  3. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

  4. 纯css制作带三角(兼容所有浏览器)

    如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...

  5. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  6. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  7. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  8. 纯CSS实现小圆点和三角形图案

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

随机推荐

  1. C++——代码风格

    google代码风格 1.使用安全的分配器(allocator),如scoped_ptr,scoped_array 2.测试用的,其他的不能用: 2.1 友元 2.2 C++异常 2.3 RTTI 3 ...

  2. PAT_A1121#Damn Single

    Source: PAT A1121 Damn Single (25 分) Description: "Damn Single (单身狗)" is the Chinese nickn ...

  3. C# WinForm 访问webService天气预报

    1.直接添加服务引用 右键引用 -->添加服务引用 这样的好处是可以直接当成类用 简单 麻烦的地方就是地址是死的 代码如下: private void button1_Click(object ...

  4. 关于js的地址跳转

    一.基本的地址跳转 解说: window.open 弹出新窗口的命令:     page.html' 弹出窗口的文件名:    'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空'代 ...

  5. 使用Swagger2Markup归档swagger生成的API文档

    文章出处: http://blog.didispace.com/swagger2markup-asciidoc/ 说明 项目中使用Swagger之后,我们能够很轻松的管理API文档,并非常简单的模拟接 ...

  6. mysql数据库中某字段一部分乱码

    笔者问题:mysql表(表中数据就是乱码,可能是插入时编码问题,这个问题以后解决)导出excel时数据中有乱码(但是在页面上查看是正常的),我们希望能导出一份没有中文乱码的excel 根据热力站中一次 ...

  7. 关于redis闪退的案例

    我需要恢复之前备份的文件:dump.rdb,文件大小2.2G 于是将dump.rdb放在redis的安装目录下,然后启动redis. ./redis-server redis.conf 然后我在另一个 ...

  8. python--面向对象：多态与封装

    一.多态 :python 天生支持多态多态指的是一类事物有多种形态 eg:文件有多种形态:文本文件,可执行文件鸭子类型:python中崇尚鸭子类型,不崇尚根据继承所得来的相似 优点 : 松耦合 每个相 ...

  9. Android基础——框架模式MVC在安卓中的实践

    本篇文章包含以下内容: MVC的介绍 MVC的实践 MVC的介绍 MVC (Model View Controller),是模型(model)视图(view)控制器(controller)的缩写,一种 ...

  10. 《提高c++性能的编程技术》读书笔记

    一个程序的执行效率是取决于改程序翻译成汇编语言之后的执行的机器指令的条数.而每一个机器指令的执行的周期是一定的.C语言和C++都是高于汇编语言的高级语言,其中,C语言源代码与其相应的机器指不是完全同一 ...