在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了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. 3、获取APP 内存占用率

    关于APP内存占用,不用多说,应该是APP性能测试中比较重要的一点.试想一下,开个应用把手机内存占满了,其它应用无法打开,那么这个应用还会有人安装吗?我觉得是没有的.下面就通过adb命令获取APP虚存 ...

  2. python_way day14 CSS，莫泰对话框

    python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 四.莫泰对话框: 一.css作用域: 基本用法:style="样式" ...

  3. 2019 牛客多校第六场 D Move

    题目链接:https://ac.nowcoder.com/acm/contest/886/D 题解摘自官方题解 题目大意 有 K 个体积相同的箱子,有 N 个体积相同或相异的物品,现要按照如下策略装箱 ...

  4. shell 删除超过30天的文件和目录

    #!/bin/bash location="/root/sqlbak/" find $location -mtime +30 -type d |xargs rm -rf #删除目录 ...

  5. bootstrap Modal 模态框垂直居中

    解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...

  6. Guava环境设置

    Guava本地环境设置 这部分指导如何下载和设置Java在机器上.请按照以下步骤来设置环境. Java SE免费提供链接:下载Java.所以,根据操作系统下载对应版本. 按照说明下载java和运行.e ...

  7. 使ie8正常支持placeholder

    在IE8下测试,发现一个问题placeholder不被支持,下面是解决IE支持placeholder的方法,本文引用的jquery是1.12.0测试通过,先引用jquery <script ty ...

  8. mysql的各种锁简单总结

    表总体上分为三种: 1.表锁 Myisam 开销小,并发低,加锁快,不会出现死锁问题:锁粒度大,发生锁冲突的概率最高. 2.行锁 innodb  开销大,并发高,加锁慢,会出现死锁问题:锁粒度小,发生 ...

  9. 通过actionlib控制jaco机械臂

    为了安全,先写一个简单控制三个手指的程序: 根据驱动包内kinova_fingers_action.cpp服务器写客户端程序 #include <ros/ros.h> #include & ...

  10. docker 常用

    docker 163仓库 # 更换docker源163 vim /etc/docker/daemon.json { "registry-mirrors": ["http: ...