在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了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. 关于Unity中文件读取

    存储: 在程序发布后文件的存放有两种,第一种是打包到Uniyt的资源包中(*.unity3D),第二种就是把文件存放在一个特殊的目录如:StreamingAssets,这个目录的东西Unity不会打包 ...

  2. P2216 [HAOI2007]理想的正方形 (单调队列)

    题目链接:P2216 [HAOI2007]理想的正方形 题目描述 有一个 \(a\times b\)的整数组成的矩阵,现请你从中找出一个 \(n\times n\)的正方形区域,使得该区域所有数中的最 ...

  3. Git 学习第一天

    本文是根据廖雪峰老师的git教程记录的学习笔记,特此说明,原教程链接https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c ...

  4. Django框架（三）—— orm增删改查、Django生命周期

    目录 orm增删改查.Django生命周期 一.orm介绍 二.orm增删改字段 三.Django生命周期 orm增删改查.Django生命周期 一.orm介绍 1.什么是orm ORM即Object ...

  5. Flatty Shadow图标自动产生器——在线生成各种扁平化 ICON

    在扁平化风格越来越流行的今天,网页.软件界面和图标的设计大都采用了扁平化风格.特别是扁平化图标的设计,摒弃了一切3D元素的设计,阴影.纹理.透视神马的统统不要,让图标简洁高效,富有现代感. 今天给大家 ...

  6. css 给图片添加滤镜效果，透明层毛玻璃效果

    我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果 原图 添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...

  7. java oop第11章_反射、BaseDao的进一步改造

      引言:从Java5开始,Java中引用了一个新的概念反射,当程序运行时,能动态感知到程序中拥有的所以信息,这个获取信息的过程是采用反射机制来完成. 一.       Class类: Class类用 ...

  8. python_django_静态文件

    什么是静态文件? 是django中用于存放css,js,图片,json文件,字体文件等的文件,使代码更好管理. 1.配置 https://www.cnblogs.com/Vera-y/p/114923 ...

  9. 一个简易h5涉及的ps技巧

    事实证明,很长时间不做,是会忘掉的呀,的呀,呀,啊~ 1.合并图层 CTRL+E合并多个图层 2.切片 3.导出 文件-------导出------存储为web所用格式-------->> ...

  10. You believe in fate?

    You believe in fate?你相信命运吗?