首先上图：

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

在介绍通过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. MYSQL高可用(HA)随想

    记得在上一篇文章“Java集群--大型网站是怎样解决多用户高并发访问的”的结尾处本人阐述了数据库的高可用的一种方案----实现主从部署,那么今天,就让我聊聊本人关于数据库的一些所思所想吧! 下面是本人 ...

  2. openGL点精灵PointSprite具体解释: 纹理映射，旋转，缩放，移动

    第一,什么是点精灵 openGL的图形由顶点构成,以后利用顶点进行纹理的映射.点精灵就是,一个顶点被当作一个精灵来处理.特别之处就是,一个顶点也可进行纹理贴出.比如,原来是个顶点构成的一个矩形,如今一 ...

  3. Android中Dialog的使用

    上一篇博文讲到对话框popWindow的使用,这篇博文主要解说Dialog的使用. 1.什么是Dialog? Dialog就是对话框的一种方式! 在Android开发中.我们常常会须要在Android ...

  4. 线段树（单点更新and成段更新）

    线段树需要的空间. 区间为1-->n 假设是一棵完全二叉树,且树高为i. 完全二叉树性质:第i层最多有2^(i-1)个结点. 那么 2^(i-1) = n;     i = log2(n)  + ...

  5. Java Evaluate Reverse Polish Notation(逆波兰式)

    表情:: ["2", "1", "+", "3", "*"] -> ((2 + 1) * 3) ...

  6. 数据结构：Binary and other trees（数据结构，算法及应用（C++叙事描述语言）文章8章）

    8.1 Trees -->root,children, parent, siblings, leaf; level, degree of element 的基本概念 8.2 Binary Tre ...

  7. PL/SQL 游标的使用

     游标的使用 ①游标概念 为了处理SQL 语句,ORACLE 必须分配一片叫上下文( context area )的区域来处理所必需的信息, 当中包含要处理的行的数目.一个指向语句被分析以后的表示 ...

  8. 【Java先进】Lock、通过使用线程池

    import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...

  9. js多物体任意值运动

    假如有两个div,一个div要变宽,一个div要变高,你怎么写呢? 哎呀,写2个方法啊,一个控制div1变宽,一个控制div2变高啊 那么你的代码,是不是下面这样的呢! 示例:Div变宽和变高 现象: ...

  10. poj 3375 Network Connection

    今天在叉姐的群里找点题目做,这题目还是很好的:提意思如下 [有M个可以提供计算机网络的端口和N台计算机(计算机数量少于端口数),每个端口和计算机有一个坐标(一维的)!其中端口与计算机链接的距离 |x  ...