css小技巧，如何制作一个箭头符号

首先上图：

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

 

在介绍通过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控制

posted @ 2015-03-13 11:34  liuminghai  阅读(3546)  评论(0)  编辑  收藏  举报