使用html+css实现三角标示符号
我们平常打开某个网站的时候，常常会发现网页上很多导航或者指示条会使用一个三角符号去指向内容，效果简洁美观，甚至很多前端面试中也会提及如何在网页上实现一个三角符号，这里给出一个很简单使用的实现方式。
首先看看哪些网站都使用了这种方式：
淘宝（注意到右边那个三角符号）
网易（导航条三角符号应用）
搜狐
这种例子多不胜数，此处不一一举例了。下面说如何实现：
实现方式实际上很简单，主要利用了伪元素和定位来完成：
代码如下：
<!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实现三角标示符号的更多相关文章
- 使用css实现三角符号
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
- 用CSS制作小三角提示符号
今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...
- css实现三角的一些方法
css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子: css三角形状的制作: css样式: .trian ...
- 使用css制作三角
1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...
- css实现三角箭头（兼容IE6)
纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...
- 纯CSS的三角符号
项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...
- 用CSS正确显示人民币符号的HTML转义字符
做电子商务的难免要跟钱打交道,特别是跟人民币接触更多,但人民币符号长什么样呢,是￥还是￥?糊涂了吧^~^,要知道答案很简单,找出一张新的一百元大钞,在背面看看那个防伪的银线,上面就有. 我们做网页时要 ...
- 用css 制作三角
html代码: <div class="div"></div> css代码: .div{ border-top:40px solid #ff0077; bo ...
- 纯CSS制作三角（转）
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
随机推荐
- 省队集训 Day5 选举
[题目大意] 小奇和魔法猪要竞选膜钟国的总统. 有 $n$ 个选民,编号为$1...n$,他们中有的人支持小奇,有的人支持魔法猪,还有的人保持中立. 现在你需要把选民分成若干个区间,每个区间的长度在$ ...
- 深入理解 Java 多线程核心知识：跳槽面试必备
多线程相对于其他 Java 知识点来讲,有一定的学习门槛,并且了解起来比较费劲.在平时工作中如若使用不当会出现数据错乱.执行效率低(还不如单线程去运行)或者死锁程序挂掉等等问题,所以掌握了解多线程至关 ...
- Elements in iteration expect to have 'v-bind:key' directives.
code->首选项->设置->在搜索框中输入:vetur.validation.template->你懂的
- 使用JQGrid 问题汇总 不定时更新
jqgrid左下角的复杂搜索框显示为下拉框样式searchoptions: { value: ": 全部; 1: 在用; 2: 报废", sopt: ['eq'] } jqgrid ...
- BP神经网络-- 基本模型
转载:http://www.cnblogs.com/jzhlin/archive/2012/07/28/bp.html BP 神经网络中的 BP 为 Back Propagation 的简写,最早它 ...
- HDU 5116 Everlasting L
题目链接:HDU-5116 题意:给定若干个整数点,若一个点集满足P = {(x, y), (x + 1, y), . . . , (x + a, y), (x, y + 1), . . . , (x ...
- 2017多校第7场 HDU 6129 Just do it 找规律
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6129 题意:求a序列后m次xor前缀和 解法: 手动对1位置对每个位置的贡献打表发现 第一次 贡献为 ...
- 微信小程序使用canvas绘制图片的注意事项
1.单位换算问题,canvas的尺寸单位是px,所以单位需要做个换算,可以通过wx.getSystemInfo获取屏幕宽高(单位是px),微信小程序无论什么机型,屏幕宽度都是750rpx,因此可以做个 ...
- 怎么快速入门一个老的java项目
作者:eilen著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1.有文档肯定先看文档,先看设计文档,产品的.技术的设计文档,接口文档写的好的可以看看,要是写的不好不着急看. 2 ...
- dotnet core多平台开发体验（mac os x 、windows、linux）
前言 随着net core rc2的发布,园子里面关于net core的入门文章也也多了起来,但是大多数都是在一个平台上面来写几个简单的例子,或者是在解释代码本身,并没有体现说在一个平台上面创建一个项 ...