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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="gb2312">
  5.     <title>ces</title>
  6.     <style>
  7.         a{ text-decoration: none; color: #666; }
  8.         ul{ list-style: none; }
  9.         ul li{ margin-left: 10px; position: relative; }
  10.         li::before{
  11.             content: "";
  12.             border: solid 4px;
  13.             border-color: transparent transparent transparent #666;
  14.             width: 0px;
  15.             height: 0px;
  16.             position: absolute;
  17.             left: -6px;
  18.             top: 6px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <ul>
  24.         <li><a href="#">列表列表列表列表列表列表</a></li>
  25.         <li><a href="#">列表列表列表列表列表列表</a></li>
  26.         <li><a href="#">列表列表列表列表列表列表</a></li>
  27.         <li><a href="#">列表列表列表列表列表列表</a></li>
  28.         <li><a href="#">列表列表列表列表列表列表</a></li>
  29.         <li><a href="#">列表列表列表列表列表列表</a></li>
  30.     </ul>
  31. </body>
  32. </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. TFS 中如何将项目加入已有的源代码管理器中？

    Visual Studio 的某解决方案已经加入 Team Foundation Server,现在再将已经存在的项目加入到解决方案中,可是签入时,并没有把新加入的项目签入,怎么办呢? 在团队资源管理 ...

  2. 在Linux下面无法使用向上箭头自动补全上条命令

    会用^[[A替代. 参考:http://stackoverflow.com/a/8641302/941650

  3. SPOE网络供电

    本文摘自:https://wenku.baidu.com/view/929bd42daa00b52acec7ca3a.html 随着网络技术与应用的快速发展,网络前端设备的种类越来越多.架设越来越广泛 ...

  4. python软件开发规范&分文件对于后期代码的高效管理

    根据本人的学习,按照理解整理和补充了python模块的相关知识,希望对于一些需要了解的python爱好者有帮助! 一.软件开发规范--分文件 当代码存在一个py文件中时: 1.不便于管理 (修改,增加 ...

  5. 209. Minimum Size Subarray Sum【滑动窗口】

    Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...

  6. Django 框架之前

    返回主目录:Django框架 内容目录: 一.Django框架之前的内容 1.1 web应用程序的架构 1.2 HTTP协议 1.3 纯手写简单web框架 一.Django框架之前d的内容 1.1 w ...

  7. 驾驶心率和呼吸，疲劳检测系统，通过安全带，坐垫等内置sensor

    HARKEN - Heart and respiration in car embedded nonintrusive sensors 2 https://www.youtube.com/watch? ...

  8. TFS中的账号和GIT中的账号

    有些公司使用TFS来进行git的管理,这个时候很多人没有区分TFS中的账号和GIT的账号的区别:TFS的账号和GIT账号是两套不同的体系,使用TFS管理GIT GIT是不需要账号密码,但是必须在win ...

  9. easyui datagrid 绑定从后台得到的复杂的特殊数据结构

    由于项目需要,从后台得到的数据统一为了类似{state:xxx,data:xxx,message:xxx}类型 但是easyui datagrid却只认{total:xxx,rows:xxx}...所 ...

  10. kafka-manager监控工具的安装和使用

    kafka-manager监控工具的使用 第一步:对kafkamanager进行下载并编译 此步骤略:可参照成功与否不详,https://www.jianshu.com/p/174b6eb10d9d ...