<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

     .arrow {

                width:0;

                height:0;

                position: absolute;

                top:0;

                left:0;

                display: inline-block;

            }

            .arrow-down {

                border-left:5px solid transparent;

                border-right:5px solid transparent;

                border-top:5px solid #f63;

            }

            .arrow-up {

                border-bottom:5px solid #f63;

                border-left:5px solid transparent;

                border-right:5px solid transparent;

                top:50px;

            }

            .arrow-left {

                border-top:5px solid transparent;

                border-bottom:5px solid transparent;

                border-right:5px solid #f63;

                top:100px;

            }

            .arrow-right {

                border-top:5px solid transparent;

                border-bottom:5px solid transparent;

                border-left:5px solid #288;

                top:150px;

            }

    </style>

</head>

<body>

     <div style="position: relative">

        <span class="arrow arrow-down"></span>

        <span class="arrow arrow-up"></span>

        <span class="arrow arrow-left"></span>

        <span class="arrow arrow-right"></span>

     </div>

</body>

</html>

补充：css生成三角形：http://www.sucaihuo.com/tools/triangle

css制作上下左右的箭头的更多相关文章

  1. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  2. 用css制作空心箭头(上下左右各个方向均有)

    平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现.基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的 ...

  3. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

  4. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  5. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  6. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  7. css制作三角形，下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  8. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  9. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

随机推荐

  1. 使用perldoc阅读perl文档

    perl在安装的时候,就给我们送上一份大礼,组织精美,解释详细的perl百科全书已经安装在你的电脑里面了,遇到问题不要在去搜索那些博客了,还是练练英文,看看perldoc吧,呵呵. 1.用perldo ...

  2. mongo操作及相关资料

    mongo操作 find方法 db.collection_name.find(); 查询所有的结果: select * from users; db.users.find(); 指定返回那些列(键): ...

  3. PHP5.5四种序列化性能对照

    json_encode,serialize,igbinary,msgpack四种序列化方式,在之前已经有过相关的測试,PHP5.5这方面的測试临时没有,这次測试基于PHP5.5,而且測试用例,http ...

  4. postgresql MVCC详解

    postgresql MVCC详解 1.postgresql隐藏列 1)tableoid 表对象唯一标识符 2)xmin 插入操作的事务标识符 3)xmax 删除操作的事务标识符 4)cmin 插入操 ...

  5. SpringCloud | FeignClient和Ribbon重试机制区别与联系

    在spring cloud体系项目中,引入的重试机制保证了高可用的同时,也会带来一些其它的问题,如幂等操作或一些没必要的重试. 今天就来分别分析一下 FeignClient 和 Ribbon 重试机制 ...

  6. Win7网络修复，winsock/tcpip

    1.win7自带网络诊断提示没有安装一个或多个协议,ip地址为169.254.x.x,dns地址为空 2.修复winsock时,提示系统找不到指定的文件. 解决办法: 1. netsh int ip ...

  7. fileupload的乱码解决

    解决方法就是这段代码,其中item是fileupload中的FileItem String value = new String(item.getString().getBytes("ISO ...

  8. sqlserver 若字段定义的类型为datetime

    sqlserver 若字段定义的类型为datetime,插入为''(空),那么会默认值为1900-01-01 00:00:00.000 解决 插入 NULL 或者程序判断

  9. BAT-SVN自动更新代码目录

    1.安装“TortoiseSVN-1.7.15.25753-x64-svn-1.7.18.msi”. 2.“运行”->“cmd”->输入“svn help”->出现用说明代表正常,提 ...

  10. pdo_mysql安装

    如果编译时没有编译pdo模块,可以cd 到php编译时的目录,重新编译 1.切换到pdo_mysql目录,如php-5.5.10/ext/pdo_mysql/ 2.生成configure文件,在pdo ...