在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了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. 输入流当中的read方法和readfully方法的区别与原理

    原文链接:https://blog.csdn.net/yangjingyuan/article/details/6151234?locationNum=3 DataInputStream类中的read ...

  2. POJ3356-AGTC-dp+字符串处理

    Let x and y be two strings over some finite alphabet A. We would like to transform x into y allowing ...

  3. PS--工具类

    1.移动工具 快捷点Vctrl + 点击想要移动的图层.选中后,就可以移动了. 2.选取工具 快捷键M2.1选取后填充颜色:新建图层 选取 右键填充 添加前景色 2.2两块选区选择一个选区后,属性面板 ...

  4. python调用tushare获取IPO新股上市列表数据

    接口:new_share 描述:获取新股上市列表数据 限量:单次最大2000条,总量不限制 积分:用户需要至少120积分才可以调取,具体请参阅本文最下方积分获取办法 注:tushare包下载和初始化教 ...

  5. Linux 进程间通信 共享内存

    1.特点: 1)共享内存是一种最为高效的进程间通信方式,进程可以直接读写内存,而不需要任何数据的拷贝.如管道当在内核空间创建以后,用户空间需要内存  拷贝,需要拷贝数据,所以效率低. 2)为了在多个进 ...

  6. Mysql ibd恢复(delete 数据)

    转载:https://www.linuxidc.com/Linux/2017-05/143870.htm 首先呢,请各位注意Percona Data Recovery Tool for InnoDB工 ...

  7. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  8. pandas--排序和排名

    排序 要对行或列索引进行排序,可使用sort_index方法,它将返回一个已排序的新对象: Series 1.对Series索引排序 obj=Series(range(4),index=['d','a ...

  9. Dijkstra算法举例分析

    题目如下: 如上图,设A为源点,求A到其他各顶点(B.C.D.E.F)的最短路径.线上所标注为相邻线段之间的距离,即权值.(注:此图为随意所画,其相邻顶点间的距离与图中的目视长度不能一 一对等). 解 ...

  10. 基于restframework进行token验证

    一般情况下,进入到web网站主页都需要进行token或者其它验证,不能在没有登录的情况下可以查看主页的内容,在用户输入用户名密码后,进行校验成功,后台会返回一个token,用于用于下次访问主页或其它页 ...