首先上图：

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

在介绍通过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 EE (3) -- Java EE 6 Web Services Developer Certified Expert(1z0-897)

    Create an SOAP web service in a servlet container Create a RESTful web service in a servlet containe ...

  2. Codeforces Round #257 (Div. 2) 题解

    Problem A A. Jzzhu and Children time limit per test 1 second memory limit per test 256 megabytes inp ...

  3. Linux shell用法和技巧(转)

    使用Linux shell是我每天的基本工作,但我经常会忘记一些有用的shell命令和l技巧.当然,命令我能记住,但我不敢说能记得如何用它执行某个特定任务.于是,我开始在一个文本文件里记录这些用法,并 ...

  4. 说说UI设计

    近期的项目验收中,无数次的提到了UI的设计,首先来说说为什么UI设计如此重要. 对于用户来说产品的外观是最先映入眼帘的,无论你用了什么高端的技术,无论你后台代码封装的多么好,用户是无法体会到的,能体会 ...

  5. .Net程序猿乐Android发展---(1)环境结构

    对于没有接触Android人才发展,你可能会觉得Android更难以发展.接下来的一段时间,我们将了解Android开发的详细细节,主要是面对.NET程序猿,来看看.NET程序猿如何进行Android ...

  6. 我已提取并尝试使用启动脚本（./start navicat）来启动 Navicat Linux 版本号，但没有反应

    具体的安装教程,參考这个navicat_for_mysql_10.0.11在linux下的安装,介绍的非常具体 參考这个 :我可否在 64-bit Linux 执行 Navicat? 推荐navica ...

  7. 移动web：Tips消息弹出框

    在web开发中经常会用到像alert这样的弹出消息,每个浏览器自带的消息弹出框都不相同.为了统一外观,实现自定义的功能,动手写一个弹出框插件. 对弹出框的实现要求如下: 1. 仿照IOS系统弹出外观 ...

  8. IT忍者神龟之使用 PowerDesigner

    1. 启动 PowerDesigner 新建物理数据模型 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmlweWhk/font/5a6L5L2T/fon ...

  9. LR杂记 - loadrunner各项指标结果分析

    Transactions (用户事务分析) 用户事务分析是站在用户角度进行的基础性能分析. 1 . Transation Sunmmary (事务综述) 对事务进行综合分析是性能分析的第一步,通过分析 ...

  10. NLP | 自然语言处理 - 解析（Parsing, and Context-Free Grammars）

    什么是解析? 在自然语言的学习过程,个人一定都学过语法,比如句子能够用主语.谓语.宾语来表示.在自然语言的处理过程中.有很多应用场景都须要考虑句子的语法,因此研究语法解析变得很重要. 语法解析有两个基 ...