首先上图：

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

在介绍通过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. C#区域截图——调用API截图

    原文:C#区域截图——调用API截图 前言:截图对于一个C++开发者来说无非是小菜一碟,也有朋友使用C#的 Graphics.CopyFromScreen 方法屏幕操作,作为一名整天想着用 C++ 开 ...

  2. mysql-定时调用存储过程

    mysql定时调用存储过程,对表数据集表结构进行备份 存储过程实例: BEGIN DECLARE tname varchar(64); set @tname = CONCAT('RENAME TABL ...

  3. android中listview分页载入数据

    前段时间做的新浪微博项目一直想实现listview分页载入数据,今天最终实现了,哈哈!感觉挺好的,今天又写了个demo给大家分享下. 首先说下listview的优化方案,这也是面试中常考的题目.优化方 ...

  4. poj1236 有向图加边变成强连通图

    给我们一个有向图,有两个问题 1.最少要给多少个点发消息,才能使得所有的点都收到消息(消息可以随边传递) 2.最少需要多少条边才能使得图变成强连通图 对于一个强连通分量,可以当做一个点来考虑,所以我们 ...

  5. SICP 1.20经验

    1.20 两者之间的主要区别是,使我们明白的操作顺序. 网上找一些答案,都死了扩大. 我们所从事的IT的. 展开搞死人IT实践. 首先考虑应用程序 我们得到 gcd(206, 40) -> gc ...

  6. Understanding responsibilities is key to good object-oriented design（转）

    对象和数据的主要差别就是对象有行为,行为可以看成责任职责(responsibilities以下简称职责)的一种,理解职责是实现好的OO设计的关键.“Understanding responsibili ...

  7. 优化数据页面（18）——标注keyword

    优化数据页面(18)--标注keyword 设计要点:优化数据页面.界面设计.美化exce 秀秀:事实上俺认为,相同是数据项,它们的重要程度也不同. 阿金:嗯? 秀秀:每一行数据时描写叙述一条信息的, ...

  8. [TroubleShooting]&#39;trn\bak&#39; is incorrectly formed. SQL Server cannot process this media family.

     SQL Server online consultants came across an interesting scenario where one of our client was una ...

  9. nodeValue的兼容问题

    nodeValue获取Text或Comment元素的文本值. 在IE6.IE7.IE8中游览器会自作聪明的去掉前面的空白字符text,而其它现代游览器则会保留空白 <body> <s ...

  10. Acdreamoj1115(数学思维称号)

    意甲冠军:1,3是完美的数,假定a,b是完美的数,然后,2+a*b+2*a+2*b,结论认为,n无论是完美的数字. 解法:開始仅仅看出来2+a*b+2*a+2*b=(a+2)*(b+2)-2,没推出很 ...