首先上图：

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

在介绍通过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. jstack(查看线程)、jmap(查看内存)和jstat(性能分析)命令

    jstack(查看线程).jmap(查看内存)和jstat(性能分析)命令   公司内部同事分享的一篇文章 周末看到一个用jstack查看死锁的例子.昨天晚上总结了一下jstack(查看线程).jma ...

  2. 黄聪：Microsoft Enterprise Library 5.0 系列教程(一) : Caching Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(一) : Caching Application Block (初级) 本篇文章具体官方解释请参照以下链接: h ...

  3. Codeforces Round#309 C Kyoya and Colored Balls

    给定一个k表示颜色的种类从1到k 然后接下来k行, 每行一个数字, 代表该颜色的球有多少个 这些球都放在一个包中,然后依次拿出.  要求颜色i的最后一个球, 必须要排在颜色i+1的最后一个球前面,   ...

  4. NET MVC运行机制

    [图解ASP.NET MVC运行机制理解-简易版]   很多盆友咨询ASP.NET MVC的机制.网上也有好多.但是都是相当深奥.看的云里雾里的.我今天抽空,整理个简易版本.把处理流程走一遍. 当然, ...

  5. poj1185炮兵阵地

    #include <iostream> #include <cstdio> #include <cmath> #include <algorithm> ...

  6. JAVA 数据权限设计

    数据权限设计 前言 在各种系统中.要保证数据对象的安全性以及易操作性,使企业的各业务部门.职能部门可以方便并且高效的协同工作,那么一个好的数据权限管理设计就成为一个关键的问题.尽管企业中各个单元的工作 ...

  7. activity点击时各种方法的区别

    用到不同方法时候某些系统有不太一样的情况: public class MainActivity extends Activity { private static String TAG = " ...

  8. 如何自动以管理员身份运行.NET程序？

    原文:如何自动以管理员身份运行.NET程序? windows 7和vista提高的系统的安全性,同时需要明确指定“以管理员身份运行”才可赋予被运行软件比较高级的权限,比如访问注册表等.否则,当以普通身 ...

  9. Codeforces554D:Kyoya and Permutation

    Let's define the permutation of length n as an array p = [p1, p2, ..., pn] consisting of n distinct ...

  10. cocos2d-x-3.1在eclipse中的环境搭建

    cocos2d-x-3.0出来后,到如今3.1. 自己在eclipse配置上走了不少弯路,记下来给大家方便,给自己方便. 前提条件: * Android NDK * Android SDK **OR* ...