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

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

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

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

搜狐

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

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

代码如下：

<!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. [POI2004] SZP （贪心+拓扑排序）

    [问题描述] Byteotian 中央情报局(BIA) 雇佣了许多特工. 他们每个人的工作就是监视 另一名特工. Byteasar 国王需要进行一次秘密行动,所以他要挑选尽量多的信得过的特工. 但 是 ...

  2. js中的document.ready

    1.概念 表示在dom结构绘制完成后执行,可能DOM元素关联的部分并未加载完 2.写法 $(document).on("ready",function(){ }) $(docume ...

  3. 利用Python 发送邮件

    概要 我们都知道SMTP(简单邮件传输协议),是一组用于从原地址到目的地址传输邮件的规范,通过它来控制邮件的中转方式.SMTP规定电子邮件应该如何格式化.如何加密,以及如何在邮件服务器之间传递.SMT ...

  4. Vuex 基本概念

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 每一个 Vuex 应用的核心就是 stor ...

  5. [Leetcode Week14]Maximum Binary Tree

    Maximum Binary Tree 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/maximum-binary-tree/description/ ...

  6. C++学习之路（二）：引用

    (1)引用是变量的别名 引用的基本定义格式:类型 &引用名 = 变量名 例如:int a = 1; int &b = a,这里b是a的别名,b与a都指向了同一块内存单元. 对于引用而言 ...

  7. Linux 入门记录：五、vi、vim 编辑器

    一.vi.vim编辑器 vi 是一个命令行界面下的文本编辑工具,最早在 1976 年由 Bill Joy 开发.当时名字叫做 ex.vi 支持绝大多数操作系统(最早在类 Unix 操作系统的 BSD上 ...

  8. python实战===爬取所有微信好友的信息

    ''' 爬取所有T信好友的信息 ''' import itchat from pandas import DataFrame itchat.login() friends=itchat.get_fri ...

  9. openfire在内网的情况下 文件传输代理的设置

    openfire在内网的情况下 文件传输代理的设置 http://blog.csdn.net/v6543210/article/details/22506565

  10. HDU 6183 Color it 线段树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6183 题意: 有四种操作: 0:清除所有点 1 x y c : 给点(x, y)添加一种颜色c(颜色不 ...