<!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. GOKit全缓动类型gif列表

    1.Linear 2.BackIn 3.BackInOut 4.BackOut 5.BounceIn 6.BounceInOut 7.BounceOut 8.CircIn 9.CircInOut 10 ...

  2. 网站的PV UV IP---网站常见软件性能

    IP,衡量不同时间段的上网人数.00:00-24:00内相同的地址被计算一次.例:日300W IP,至少300W人访问PV,衡量页面受欢迎程度.每刷新一次,被记录一次(刷pv),网站被访问的页面的数量 ...

  3. 【Android】5.5 状态切换（Switch）和评级条（RatingBar）

    分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 1.利用Switch或者ToggleButton切换状态 如果只有两种状态,可以用ToggleButton控件或S ...

  4. 使用 JavaScript 实现对 PDF 的全文索引

    Mozilla实验室最近已经收到了许多为一个项目做出的尝试,这一项目的野心令人印象深刻:在一个浏览器中仅仅使用Javascript来对PDF进行渲染.PDF文档的结构令人难以置信的复杂,因此要祝pdf ...

  5. WebForm中使用MVC

    http://www.cnblogs.com/encoding/articles/3556046.html ********************************************** ...

  6. RTX——第8章 任务优先级修改

    以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 任务优先级设置注意事项RTX 操作系统任务优先级的设置要注意以下几个问题: 设置任务的优先级时,数值越 ...

  7. timeout的作用

    废话: 刚才刚才看视屏有一点没看懂,timeout的作用. 得出的结果: setTimeout(‘test()’,1000); 第一个参数要调用的函数名,第二个参数是延时的时间.时间到达以后调用tes ...

  8. activiti5.13工作流系列(一)-初识

    1.什么是工作流? 工作流就是让多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程,工作流由实体(Entity).参与者(Participant).流程定义(Flow Definition) ...

  9. android开发中用到的px、dp、sp

    先介绍一下这几个单位: px : pixels(像素),相应屏幕上的实际像素点. dip :device independent pixels,与密度无关的像素,基于屏幕密度的抽象单位. 在每英寸16 ...

  10. MyEclipse SVN 下面切换用户的解决方案

    configuration\org.eclipse.core.runtime\.keyring 删除MyEclipse下面的文件. 或者修改服务器端的用户密码.