<!DOCTYPE>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >

.index_nav a:hover i, .index_nav a.on i {
display: inline-block;
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
bottom: -26px;
left: 50%;
border: 13px dashed transparent;
border-top: 13px solid #ea331a;

}
</style>

</head>

<body>

<div class="index_nav clearfix">
<a href="javascript:;" class="on">12月17日<i></i></a>
</div>

</body>
</html>

效果截图：

------------2015.1.19补充更新-------------------

移动端三角可以利用伪类 直接省略掉空标签：

html：

<h2>全部最新上架</h2>

css：

h2:after{
position: absolute;
margin-left: 50%;
left: 50px;
top: 9px;
/*border: 6px dashed transparent;
border-left: 6px solid rgba(255,255,255,1);*//*兼容的三角写法*/

content:'';
border-color:transparent transparent transparent rgba(255,255,255,1);
border-width:6px 9px;
border-style:solid;
}

css 兼容小三角的更多相关文章

  1. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  2. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  3. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

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

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

  5. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  6. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

  7. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  8. css的小三角实现的方式

    先上一个简单的例子哈: 此时的方向向下. 如果想方向向上的话用:border-top:0;border-bottom:4px solid; 1. width:0 height:0 border宽度,颜 ...

  9. (转载) css实现小三角（尖角）

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

随机推荐

  1. Dx 1 error; aborting Conversion to Dalvik format failed with error 1

    Dx 1 error; aborting Conversion to Dalvik format failed with error 1 问题实质是工程中android.jar包大于一个: 保留一个a ...

  2. 正确看待HTML5的语法变化

    也许会有人问:“HTML4已经很普及了,如果改变基础语法,会不会有什么影响?” 我们都知道,在HMTL5之前几乎没有符合标准规范的Webu浏览器!在这种情况下,各个浏览器之间的互相兼容性和互操作性在很 ...

  3. 函数stripslashes去除转义 shopnc 搜索框过滤特殊字符 输入单斜杆会自动转义

    如何php是如何处理和过滤特殊字符的呢? 搜索%_显示所有商品:搜索\会在搜索框内叠加\\ 查了一下 magic_quotes_sybase 项开启,反斜线将被去除,但是两个反斜线将会被替换成一个. ...

  4. 网易2014校园招聘杭州Java笔试题

    10) ABC http://soft.chinabyte.com/os/56/12516056.shtml 11) BD. 12) AC. http://blog.sina.com.cn/s/blo ...

  5. order by 中 使用decode

    表内容如下: 实现以name字段中的ABCDE的顺序排序,以及按照money字段从小到大排序. select name,money from t2 ,,,,) , money

  6. SD/MMC卡初始化及读写流程

    二.MMC/SD卡的模型和工作原理 PIN脚.SD卡总线.SD卡结构.SD卡寄存器.上电过程 SD卡寄存器:  OCR:操作电压寄存器: 只读,32位 第31位: 表示卡上电的状态位   CID: 卡 ...

  7. VC6.0 显示代码行号和WndTab插件

    VC6.0是一款比较稳定的功能强大的IDE,目前也有很多人在使用.但美中不足的是它不能像其他IDE那样显示行号. 这里需要用到一个插件VC6LineNumberAddin,下载地址:http://fi ...

  8. zhihu spark集群,书籍,论文

    spark集群中的节点可以只处理自身独立数据库里的数据,然后汇总吗? 修改 我将spark搭建在两台机器上,其中一台既是master又是slave,另一台是slave,两台机器上均装有独立的mongo ...

  9. 【转】 怎么刷入BOOT.IMG(刷机后开机卡在第一屏的童鞋请注意)-------不错不错

    原文网址:http://bbs.gfan.com/android-3440837-1-1.html 之前呢,有好多机油问我关于刷机卡屏的问题,我解答了好多,但一一解答太费事了,在这里给大家发个贴吧.其 ...

  10. knowledges address

    http://www.zhukun.net/archives/5794