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

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

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

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

搜狐

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

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

代码如下：

<!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. java将文件转为UTF8工具类

    package hiveTest; import java.io.BufferedReader; import java.io.DataInputStream; import java.io.File ...

  2. MyBatis 系列五 之 延迟加载、一级缓存、二级缓存设置

    MyBatis的延迟加载.一级缓存.二级缓存设置 首先我们必须分清延迟加载的适用对象 延迟加载 MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时,按照设置延迟加载规则推迟对关联对象的se ...

  3. MSSQL数据库 事务隔离级别

    数据库事务的隔离级别有4个,由低到高依次为Read uncommitted .Read committed .Repeatable read .Serializable ,这四个级别可以逐个解 脏读 ...

  4. vuejs怎么在服务器部署？

    通过npm run build 把生成的dist文件夹(不要上传文件夹)里的内容上传到http服务器上就可以通过 http来访问了,开发机上正常,上传以后 程序出现错误不能运行的原因99.99%的可能 ...

  5. Java垃圾收集算法

    算法名称 过程 优缺点 1. 标记-清除算法 (Mark-Sweep) 分为两个阶段: 1.首先标记出所有需要回收的对象: 2.在标记完成后统一回收所有被标记的对象. 缺点: 1.效率问题:标记和清除 ...

  6. kimbits_USACO

    StringsobitsKim Schrijvers Consider an ordered set S of strings of N (1 <= N <= 31) bits. Bits ...

  7. Linux 入门记录：四、Linux 系统常用命令

    一.日期时间 命令 date 查看.设置当前系统时间: date -u 格林威治时间 date %Y-%m-%d 显示格式化的时间 date -s "23:00" 使用 -s 参数 ...

  8. java===java基础学习（16）---final

    final-----概念 1.当不希望父类的某个方法被子类覆盖(override)时,可以用final关键字修饰. 2.当不希望类的某个变量的值被修改时,可以用final修饰.如果要用final,则必 ...

  9. SVN服务的配置与管理

    引言 没当服务器重启,SVN服务都会停止,每次都得重启一下服务,为了解决这样的问题.有了下文. 一.配置自启动服务 sc create SVNService binpath="E:\svn\ ...

  10. HIbernate学习笔记4 之 延迟加载和 关联映射

    一.延迟加载 * 在使用hibernate一些方法的查询数据的时候,返回的只是一个空对象(除id外属性都为NULL),并没有真正的查询数据库,而是在使用这个对象时才会触发查询数据库,并将这些数据注入到 ...