我们平常打开某个网站的时候，常常会发现网页上很多导航或者指示条会使用一个三角符号去指向内容，效果简洁美观，甚至很多前端面试中也会提及如何在网页上实现一个三角符号，这里给出一个很简单使用的实现方式。

首先看看哪些网站都使用了这种方式：

淘宝（注意到右边那个三角符号）

网易（导航条三角符号应用）

搜狐

这种例子多不胜数，此处不一一举例了。下面说如何实现：

实现方式实际上很简单，主要利用了伪元素和定位来完成：

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .div1{

            background: red;

            width: 100px;

            height: 100px;

            position: relative;

        }

        .div1:after{

            position: absolute;

            bottom: 0;

            width: 0;

            height: 0;

            left: 50%;

            margin-left: -10px;

            content: " ";

            border-bottom: 10px solid  #000000 ;

            border-left: 10px solid transparent ;

            border-right: 10px solid transparent ;

        }

        .div1:before{

            position: absolute;

            top: -10px;

            width: 0;

            height: 0;

            left: 50%;

            margin-left: -10px;

            content: " ";

            border-bottom: 10px solid  #000000 ;

            border-left: 10px solid transparent ;

            border-right: 10px solid transparent ;

        }

    </style>

</head>

<body>

<div class="div1">

（）

</div>

</body>

</html>

这里首先定义一个div，给它加上一个class叫做div1，主要是用来给它自身定义背景，宽高，并且需要加上相对定位，因为它里面的三角符号需要在它的基础上进行绝对定位；

在这个div1 class上面加一个before或者after的伪元素，这个就是三角符号，主要利用了它的border属性，定义三个border，让border-left和border-right透明，让border-top（或border-bottom）非透明，取决于你想将这个三角符号设置成什么颜色。

最后需要给这个三角符号进行绝对定位，如果你要将它放在这个div的最下面，可以设置bottom：0，如果你要做一个导航类的三角让它在div顶部并指向某元素，可以采用负的top值进行实现，其为负的border的宽度，就可以让它和div连在一起。

同时，要设置这个伪元素宽高为0，内容为空，剩下的工作就是调整它的位置了，效果如下：

使用html+css实现三角标示符号的更多相关文章

  1. 使用css实现三角符号

    关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...

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

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

  3. css实现三角的一些方法

    css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子:   css三角形状的制作:     css样式:    .trian ...

  4. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  5. css实现三角箭头（兼容IE6)

    纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...

  6. 纯CSS的三角符号

    项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...

  7. 用CSS正确显示人民币符号的HTML转义字符

    做电子商务的难免要跟钱打交道,特别是跟人民币接触更多,但人民币符号长什么样呢,是￥还是￥?糊涂了吧^~^,要知道答案很简单,找出一张新的一百元大钞,在背面看看那个防伪的银线,上面就有. 我们做网页时要 ...

  8. 用css 制作三角

    html代码: <div class="div"></div> css代码: .div{ border-top:40px solid #ff0077; bo ...

  9. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

随机推荐

  1. 【洛谷 P2762】 太空飞行计划问题（最大权闭合图）

    题目链接 最大权闭合图模型,参考 具体做法是从源点向每个实验连一条流量为这个实验的报酬的边,从每个实验向这个实验需要的所有器材各连一条流量为\(INF\)的边,再从每个器材向汇点连一条流量为这个器材的 ...

  2. nyoj 15 括号匹配（二） （经典dp）

    题目链接 描述 给你一个字符串,里面只包含"(",")","[","]"四种符号,请问你需要至少添加多少个括号才能使这些 ...

  3. 如何升级nodejs版本 安装n模块报错 npm ERR! notsup Unsupported platform

    如何升级nodejs版本 首先安装n模块, 输入npm install -g n n模块专门用来管理nodejs的版本. 如果出现npm ERR! notsup Unsupported platfor ...

  4. github删除文件夹

    git rm -rf dirgit add .git commit -m 'remove dir'git push origin master //dir是要删除的文件夹路径

  5. 跟踪内核启动过程CONFIG_DEBUG_LL【转自】

    转自:http://bbs.chinaunix.net/thread-3642079-1-1.html 最近在调试Linux内核,跟踪启动过程.发现在没有turn on mmu之前,可以使用物理地址, ...

  6. Linux下用freetds执行SQL Server的sql语句和存储过程

    Linux下用freetds执行SQL Server的sql语句和存储过程 http://www.linuxidc.com/Linux/2012-06/61617.htm freetds相关 http ...

  7. 斯坦福开源无Bug的随机计算图Certigrad

    斯坦福开源无Bug的随机计算图Certigrad https://news.cnblogs.com/n/573690/ ttps://github.com/dselsam/certigrad

  8. glob模块的使用

    glob模块 功能描述:glob模块可以使用Unix shell风格的通配符匹配符合特定格式的文件和文件夹,跟windows的文件搜索功能差不多.glob模块并非调用一个子shell实现搜索功能,而是 ...

  9. C#比较两个list集合，两集合同时存在或A集合存在B集合中无

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. linux磁盘占用跟每个文件夹大小总和不符

    1.一种情况是删除了大文件但是没有释放出来,因为有进程还在调用使用 最简单的方法是reboot下服务器再对比下: 2.查看服务器空间使用情况 df -h cd / du -sh *