在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了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. hexo的next主题博客中加入分类页面的js，实现多级目录，并且能够点击展开，隐藏下级目录~（不知道算不算深度优化~~~）

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 多级标题 在自己的xxxx.md文件中做如下修 ...

  2. 拾遗：govendor（Golang 依赖库版本控制）

    官方资料: https://github.com/kardianos/govendor https://github.com/kardianos/govendor/blob/master/doc/fa ...

  3. Java 序列化和反序列化（二）Serializable 源码分析 - 1

    目录 Java 序列化和反序列化(二)Serializable 源码分析 - 1 1. Java 序列化接口 2. ObjectOutputStream 源码分析 2.1 ObjectOutputSt ...

  4. java-day22

    数据库设计的范式         * 概念:设计数据库时,需要遵循的一些规范.要遵循后边的范式要求,必须先遵循前边的所有范式要求 设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不 ...

  5. springboot配置swagger-rest文档

    前言 swagger是一个很好的restful形式的api文档,可以通过比较小的侵入来提供很好的restful的文档.因为swagger是依赖服务生成的,所以其实是依赖服务的,这也算是它的一个小缺点吧 ...

  6. python接口自动化（响应对象方法）

    python接口自动化(响应对象方法) 一.encoding作用 获取请求的编码(在不设置响应编码时,响应的信息默认使用的是请求的编码格式):r.encoding 设置响应的编码:r.encoding ...

  7. linux每日命令(2)：ps命令

    ps命令真是我比较常用的命令了,只是也没咋仔细研究过,最大的用处就是写代码的时候,起了多进程,就会占用多个进程,如果程序异常了,进程确没有kill掉,那么再启动程序就会报错 正常起项目 如果进程被占用 ...

  8. zipinfo - 列出关于某个ZIP压缩包的详细信息

    总览 SYNOPSIS zipinfo [-12smlvhMtTz] file[.zip] [file(s) ...] [-x xfile(s) ...] unzip -Z [-12smlvhMtTz ...

  9. Linux grep return code

    The exit code is 1 because nothing was matched by grep. EXIT STATUS The exit status is 0 if selected ...

  10. vue之事件处理

    一.事件处理方法 1.格式 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"  缩写格式:@事件名="函数名&qu ...