首先上图：

第一种方法大家可能想到了，就是用背景图片制作箭头符号，但是下面介绍的不是这种方法。

在介绍通过border制作箭头符号之前，先看下下面的css代码：

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" href="style.css">

    <script src="script.js"></script>

    <style>

           div.button {

               background: #B1B1B1;

               color: #FFF;

               font-weight: bold;

               border: 10px solid #DFDFDF;

               border-right-color: black;

               border-left-color: red;

               border-top-color: yellow;

               border-bottom-color: green;

               width:100px;

           }

    </style>

  </head>

  <body>

    <div class="button"></div>

  </body>

</html>

显示效果：

那么大家看到 上面的div的宽度为100px，没有设置高度，上下border所占高度为20px，那么这个div高为20px.如果将长度100px改为0px，是什么效果呢，如下图：

那么设置箭头符号如何做，大家就应该很清楚了

1、我想设置箭头向上的arrow,只需要下边框设置自己想要的非透明颜色（绿色部分），其他左、上、右边框设置为透明，就能获得我们想要的效果，其它三类方向的边框类似做法。

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" href="style.css">

    <script src="script.js"></script>

    <style>

           div.arrow1{

               background-color:transparent;

               width:0px;

               font-weight: bold;

               border:10px solid transparent;

               border-top-color: #666;

               margin:20px;

           }

           div.arrow2{

               background-color:transparent;

               width:0px;

               font-weight: bold;

               border:10px solid transparent;

               border-bottom-color: #666;

               margin:20px;

           }

           div.arrow3{

               background-color:transparent;

               width:0px;

               font-weight: bold;

               border:10px solid transparent;

               border-left-color: #666;

               margin:20px;

           }

           div.arrow4{

               background-color:transparent;

               width:0px;

               font-weight: bold;

               border:10px solid transparent;

               border-right-color: #666;

               margin:20px;

           }

    </style>

  </head>

  <body>

    <div  class="arrow1"></div>

    <div  class="arrow2"></div>

    <div  class="arrow3"></div>

    <div  class="arrow4"></div>

  </body>

</html>

2、组合做四种border生成自己想要方向的边框

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" href="style.css">

    <script src="script.js"></script>

    <style>

          div.arrow4{

               background-color:transparent;

               width:0px;

               font-weight: bold;

               border:8px solid transparent;

               border-right-color: #666;

               border-bottom-color: #666;

               margin:20px;

           }

    </style>

  </head>

  <body>

    <div  class="arrow4"></div>

  </body>

</html>

上面是组合右下边框设置成自己想要的箭头符号如图：，箭头大小可以通过border-width控制

css小技巧，如何制作一个箭头符号的更多相关文章

  1. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  2. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

  3. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  4. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

  5. CSS 小技巧 | 一行代码实现头像与国旗的融合

    到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...

  6. 小技巧找出一个php的cron脚本出问题的代码行

    这个小技巧虽然很小,但是很有用. 我写了一个cron脚本,但是隔一天发现,这个昨天的cron脚本还一直在跑着,没有停下来,一定是里面有个程序堵住了. 但是如果我重新跑又需要很多时间.这个怎么办? 现在 ...

  7. 【Unity技巧】制作一个简单的NPC

    1. 写在前面 前几天看了cgcookie的一个教程,学习了下怎么根据已有人物模型制作一个仿版的NPC人物,感觉挺好玩的,整理一下放到博客里! 先看一下教程里面的最终效果. 是不是很像个幽灵~ 下面是 ...

  8. 模仿也是提高，纯css小技巧实现头部进度条

    刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...

  9. 【CSS小技巧】 用 CSS 实现一个宽高等比自适应容器

    不知道怎么起个标题能更加清楚的说清楚我的意图,那就打个比方吧:比如我们在手机端上放一张宽度 100% 的图片,我们如果不设置图片的高度,那么这个图片会根据图片的原始尺寸等比缩放.今天我们要讲的就是实现 ...

随机推荐

  1. java 字符串 asc 加密解密

    package com; public class MD5Test { /** * @param args */ public static void main(String[] args) { Sy ...

  2. ecshop首页调用指定分类的所有产品（指定一级调二级）

    第一种方法 第一 在/includes/lib_goods.php下增加如下代码,用过网上的直接换掉就可以 function index_get_cat_id_goods_best_list($cat ...

  3. pygame系列

    在接下来的blog中,会有一系列的文章来介绍关于pygame的内容,pygame系列偷自http://www.cnblogs.com/hongten/p/hongten_pygame_install. ...

  4. NYOJ 709(ZZULIOJ1481) 异 形 卵

    题目描写叙述 我们探索宇宙,是想了解浩瀚星空的奥妙,但我们却非常少意识到宇宙深处藏匿的危急,它们无时无刻不紧盯着我们的地球.假设外星人拜訪我们,结果可能与哥伦布当年踏足美洲大陆不会有什么两样,这是历史 ...

  5. 菜鸟学习spring IOC有感

     一.spring IOC思想引入 事实上对于刚開始学习的人来说,在学习IOC的时候确实有点困难,主要是掌握其思想方面存在一丢丢的障碍,可是假设可以跨过这个障碍,则可以高速掌握当中的思想了.单从字 ...

  6. 基于opencv在摄像头ubuntu根据视频获取

     基于opencv在摄像头ubuntu根据视频获取 1  工具 原料 平台 :UBUNTU12.04 安装库  Opencv-2.3 2  安装编译执行步骤 安装编译opencv-2.3  參考h ...

  7. Node.js : 我只需要一个店小二

    刚刚开始接触Node.js时, google了很多文章,但发现大部分都是泛泛的介绍安装,配置,以及介绍几个小例子 有一种雾里观花的感觉,所以非常困惑,不知道Node.js到底解决了什么问题,它的优势到 ...

  8. 初识google多语言通信框架gRPC系列（三）C#中使用gRPC

    我的这几篇文章都是使用gRPC的example,不是直接编译example,而是新建一个项目,从添加依赖,编译example代码,执行example.这样做可以为我们创建自己的项目提供借鉴.如果对gR ...

  9. Windows 2008 配置ASP+ACCESS环境(亲身体会)

    我们公司OA系统是用asp开发的,时间有些长了,原来只是公司总部,部署到内网就可以了,现在要求全国各地的分公司也要用,而且接入了56短网的短信接口(http://www.56dxw.com),主要起到 ...

  10. 图的创建和遍历(BFS/DFS)

    图的表示方法主要有邻接矩阵和邻接表.其中邻接表最为常用,因此这里便以邻接表为例介绍一下图的创建及遍历方法. 创建图用到的结构有两种:顶点及弧 struct ArcNode { int vertexIn ...