效果图

代码

<!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. POJ3928、LA4329【树状数组】

    借此题试验一下各种做法的效果~ 这题为ACM2008北京站某题,介于简单与中等之间,做出来,罚时不多基本可以铜了,所以这样的题还必须得会,进阶之路. add(a[i]+1,1)这样处理之后,再用sum ...

  2. 【转】如何分析解决Android ANR

    来自: http://blog.csdn.net/tjy1985/article/details/6777346 http://blog.csdn.net/tjy1985/article/detail ...

  3. C++学习笔记之作用域为类的常量和作用域内的枚举

    一.作用域为类的常量 有些情况下,使符号常量的作用域为类很有用.如,类声明(不是定义)可能使用字面值30来指定数组长度,由于该常量对于所有对象来说都是相同的,因此创建一个由所有对象共享的常量是个不错的 ...

  4. Mysql权限控制 - 允许用户远程连接

    Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...

  5. Codeforces Round #335 (Div. 1) C. Freelancer's Dreams 计算几何

    C. Freelancer's Dreams Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contes ...

  6. TP复习15

    ## ThinkPHP 3.1.2 URL#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.URL规则 1.默认是区分大小写的 2.如果我们不想区分大小 ...

  7. js中日期转换为时间戳

    function dateToTimestamp(date) { //方法一 var newDate = new Date(); newDate.setFullYear(date.substring( ...

  8. 关于Android 访问权限设置

    我前几天在做同城交友网(www.niyuewo.com)与医药网(www.yiyaojing.com)时遇到的问题整理如下: Android开发应用程序时,如果应用程序需要访问网络权限,需要在 And ...

  9. linux服务器之redis

    linux环境下安装redis服务器: redis下载地址:http://redis.io/download $ wget http://download.redis.io/releases/redi ...

  10. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...