视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用css实现的效果（支持ie6,7哦）

  1. <style>
  2.  /*border实现三角*/
  3.     /*箭头向上*/
  4.     .arrow-top{
  5.          width       : 0;
  6.          height      : 0;
  7.          font-size   : 0;
  8.          line-height : 0;
  9.          border-left: 5px dashed transparent;
  10.          border-right: 5px dashed transparent;
  11.          border-bottom: 5px solid red;
  12.     }
  13.     /*箭头向下*/
  14.     .arrow-bottom{
  15.             width       : 0;
  16.             height      : 0;
  17.             font-size   : 0;
  18.             line-height : 0;
  19.             border-left: 5px dashed transparent;
  20.             border-right: 5px dashed transparent;
  21.             border-top: 5px solid red;
  22.     }
  23.     /*箭头向右*/
  24.     .arrow-right{
  25.         width       : 0;
  26.         height      : 0;
  27.         font-size   : 0;
  28.         line-height : 0;
  29.         border-bottom: 5px dashed transparent;
  30.         border-top: 5px dashed transparent;
  31.         border-left: 5px solid red;
  32.  
  33.     }
  34.     /*箭头向左*/
  35.     .arrow-left{
  36.         width       : 0;
  37.         height      : 0;
  38.         font-size   : 0;
  39.         line-height : 0;
  40.         border-bottom: 5px dashed transparent;
  41.         border-top: 5px dashed transparent;
  42.         border-right: 5px solid red;
  43.  
  44.     }
  45. </style>

来看看整体html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>border实现三角</title>
  6.     <style>
  7.         /*border实现三角*/
  8.         /*箭头向上*/
  9.         .arrow-top{
  10.             width       : 0;
  11.             height      : 0;
  12.             font-size   : 0;
  13.             line-height : 0;
  14.             border-left: 5px dashed transparent;
  15.             border-right: 5px dashed transparent;
  16.             border-bottom: 5px solid red;
  17.         }
  18.         /*箭头向下*/
  19.         .arrow-bottom{
  20.             width       : 0;
  21.             height      : 0;
  22.             font-size   : 0;
  23.             line-height : 0;
  24.             border-left: 5px dashed transparent;
  25.             border-right: 5px dashed transparent;
  26.             border-top: 5px solid red;
  27.         }
  28.         /*箭头向右*/
  29.         .arrow-right{
  30.             width       : 0;
  31.             height      : 0;
  32.             font-size   : 0;
  33.             line-height : 0;
  34.             border-bottom: 5px dashed transparent;
  35.             border-top: 5px dashed transparent;
  36.             border-left: 5px solid red;
  37.  
  38.         }
  39.         /*箭头向左*/
  40.         .arrow-left{
  41.             width       : 0;
  42.             height      : 0;
  43.             font-size   : 0;
  44.             line-height : 0;
  45.             border-bottom: 5px dashed transparent;
  46.             border-top: 5px dashed transparent;
  47.             border-right: 5px solid red;
  48.  
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.  
  54. <div>
  55.     <span>店铺信息</span>
  56.     <span class="arrow-right" style="display: inline-block;"></span>
  57.     <span class="arrow-left" style="display: inline-block;"></span>
  58.     <span class="arrow-top" style="display: inline-block;"></span>
  59.     <span class="arrow-bottom" style="display: inline-block;"></span>
  60. </div>
  61.  
  62. </body>
  63. </html>

css制作小三角的更多相关文章

  1. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  2. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  3. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

  4. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  5. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  6. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  7. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  8. css制作倒三角

    布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...

  9. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

随机推荐

  1. hadoop2.2编程：从default mapreduce program 来理解mapreduce

    下面写一个default mapreduce 的程序: import org.apache.hadoop.mapreduce.Mapper; import org.apache.hadoop.mapr ...

  2. hadoop的wordcount例子运行

    可以通过一个简单的例子来说明MapReduce到底是什么: 我们要统计一个大文件中的各个单词出现的次数.由于文件太大.我们把这个文件切分成如果小文件,然后安排多个人去统计.这个过程就是”Map”.然后 ...

  3. 如何在 Windows 7 安裝 SharePoint Server 2010

    转:http://support.microsoft.com/kb/2683572/zh-tw 關於作者: 本文由微軟最有價值專家 MVP 歐志信 提供.微軟十分感謝 MVP 主動地將他們的經驗與上百 ...

  4. 如何判断 Android 应用的 Apk 签名是否一致？

    可以比对apk签名的fingerprint. 假定安装了JDK,如果想查HelloWorld.apk所使用的签名的fingerprint,可以这样做: 1. 查找apk里的rsa文件 (Windows ...

  5. redis 用setbit(bitmap)统计活跃用户

    getspool.com的重要统计数据是实时计算的.Redis的bitmap让我们可以实时的进行类似的统计,并且极其节省空间.在模拟1亿2千8百万用户的模拟环境下,在一台MacBookPro上,典型的 ...

  6. MVVM Light中的Message

    比喻:像漂流瓶一样发送一个Message,任何人有兴趣就可以拾起来. MVVM Light中的Message的使用分为三个步骤: 1.创建一个类,包含要传递的Message. 2.在ViewModel ...

  7. HDU 4799 LIKE vs CANDLE 树形dp

    题意:有n个人,他们的关系,形成一棵有根树(0是树根,代表管理员),每个人有一个价值 现在有一条微博,每个人要么点赞,要么送一个蜡烛 初始一些人利用bug反转了某些人的操作(赞变蜡烛 或者 蜡烛变成赞 ...

  8. BILL.WEI]stimulsoft reports 中panel 妙用

    我们在通过stimulsoft reports做报表,有的时候,我们需要通过合并报表的一些中间列元素,我们就可以用到panel组件 如下图,我们需要合并报表中间项,一般手段达不到要求,只能通过嵌套pa ...

  9. 执行sql update use c#

    今天犯了个大错 public static void ChangeGoodsCounts(int GoodsID, int changCounts) { int lastCount; using (S ...

  10. Maven之debug技巧

    mvn eclipse:clean eclipse:eclipse -Dwtpversion=2.0 可以将项目编译为web项目,然后再项目上右键debug as server即可.