<!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. QListWidget加入小控件

    在写一个简单的文件浏览器时,遇到一个问题.想实现新建目录时能像一般的文件管理器那样,目录图标以下有一个编辑框提示用户给目录命名(例如以下图),可是不知道怎么给单元项QListWidgetItem加入Q ...

  2. vim：inoremap命令

    inoremap命令用于映射按键. i代表是在插入模式(insert)下有效 nore表示不递归no recursion,例如:inoremap Y y和inoremap y Y并不会出现无限循环. ...

  3. ETL调度开发（5）——连接数据库运行数据库命令子程序

    ETL调度中读写数据信息,都须要连接数据库,以下的子程序通过传入的数据库连接字符串和数据库命令(或SQL)运行所须要的操作: #!/usr/bin/bash #created by lubinsu # ...

  4. [转帖]cocos2D-X源码分析之从cocos2D-X学习OpenGL（2）----QUAD_COMMAND

    原文:cocos2D-X源码分析之从cocos2D-X学习OpenGL(2)----QUAD_COMMAND 上一篇文章介绍了cocos2d-x的基本渲染结构,这篇顺着之前的渲染结构介绍渲染命令QUA ...

  5. 游戏开发tips之RTTI（1）

    首先说明标题的含义,怎么感觉就和定义一种语言一样,需要有一个规约呢..... 标题定义如下:游戏开发tip之+内容+(总tips的第几篇) 扩展如下:内容(一,二,三.....) 新手可怜,大神每一句 ...

  6. 八、Java的可变参数例子

    1.在Java中什么是可变参数 可变参数是在Java1.5中引入的特性.它准许一个方法 public static void main(String[] args) { print("a&q ...

  7. JDK Logger 简介 (zhuan)

    http://antlove.iteye.com/blog/1924832 ******************************************* 一 简述 java.util.log ...

  8. Centos7 squid安装与配置

    装squid yum install -y squid 安装httpd(用于后面生成密码文件) yum install -y httpd 或者 yum install httpd-tools -y 配 ...

  9. oracle中的字符串函数详解

    花了点时间 复习.了一下字符串函数 希望对初学者有帮助 ----------连接字符串函数-----------------select concat('leiyi','hubei') from du ...

  10. eclipse新建tomcat server但是总是报404的解决方法

    今天在eclipse中新建了tomcat server,但是由于一些配置出了问题,导致总是出现404报错,具体情况如下 症状: tomcat在eclipse里面能正常启动,而在浏览器中访问http:/ ...