效果图

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>[资源下载]</title>
    <style type="text/css">
        #tri_box{
            width: 400px;height: 100px;border: 1px solid silver;position: relative;margin: 5px auto;border-bottom: 2px solid orange;
        }
        #tri{
            width: 0px;height: 0px;border: 6px solid white;left: 200px;bottom: -14px;margin: 0px;position: absolute;border-top-color: orange;
            /*绝对定位，元素之间的位置不会互相影响，而相对定位恰好相反，所以视情况而用。*/
        }
    </style>
</head>
<body>
    <div id="tri_box"><em id="tri"></em></div>
</body>
</html>

CSS导航指示箭头的更多相关文章

  1. css指示箭头两种实现方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  3. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  4. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  5. Android弹出选项框及指示箭头动画选择

     Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...

  6. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  7. 强烈推荐一款CSS导航菜单

    强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...

  8. 使用css画一个箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HTML第二天学习笔记

    今天看视频学习的第一个知识是HTML中的块元素<div>和行内元素<span>. <!doctype html> <html lang="en&qu ...

  2. Oracle 触发器在日志管理开发中的应用

    摘要: 本文讨论了利用数据库中的触发器对日志管理进行设计与实现的方法, 是对原来在客户端软件中编写日志管理方法的一种改进, 并给出了 Oracle9i 中的实例演示.关键词: Oracle; 触发器; ...

  3. STM32 DFU -- Device Firmware Upgrade

    DFU Class Requests Get Status The Host employs the DFU_GETSTATUS request to facilitate synchronizati ...

  4. HDU 1695 GCD 容斥

    GCD 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=1695 Description Given 5 integers: a, b, c, d, k ...

  5. .NET正则基础——.NET正则类及方法应用

    1        概述 初学正则时,对于Regex类不熟悉,遇到问题不知道该用哪种方法解决,本文结合一些正则应用的典型应用场景,介绍一下Regex类的基本应用.这里重点进行.NET类的介绍,对于正则的 ...

  6. Robot Instructions

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  7. BackTrack5 (BT5)无线password破解教程之WPA/WPA2-PSK型无线password破解

    昨天公布了BackTrack5 (BT5)无线weppassword破解教程之minidwep-gtk破解法一文,对BT5下破解wep无线password的简单方法做了介绍,今天奶牛为朋友们介绍下怎样 ...

  8. C++11 之for 新解

     前言     C++11这次的更新带来了令非常多C++程序猿期待已久的for range循环,每次看到javascript. lua里的for range.心想要是C++能有多好,心里别提多酸了.这 ...

  9. [转]使用 PIVOT 和 UNPIVOT

    可以使用 PIVOT 和 UNPIVOT 关系运算符将表值表达式更改为另一个表.PIVOT 通过将表达式某一列中的唯一值转换为输出中的多个列来旋转表值表达式,并在必要时对最终输出中所需的任何其余列值执 ...

  10. 基于linux2.6.38.8内核zImage文件的自解压详解

    转载:http://blog.csdn.net/wavemcu/article/details/7270439 ******************************************** ...