<!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. Niagara AX之BajaScript资料哪里找

    四个步骤:(开篇:多谢陈工!) 1.Services下添加box->boxService: 2.在Apps下添加BajaScriptTutorialsApp: 3.登录用户的Web Profil ...

  2. Ubuntu 12.04 LTS 构建高可用分布式 MySQL 集群

    本文的英文版本链接是 http://xuri.me/2013/11/20/install-mysql-cluster-on-ubuntu-12-04-lts.html MySQL Cluster 是 ...

  3. C# ?? 运算符，不能忘记的知识点

    最近项目中有一个bug被测试(是黑盒测试)发现了,跟了老半天代码,才找到这个问题的所在,原来是一个计算表达式中用到了??运算符,才导致了这个错误,下面让我简单讲述一下. C# ?? 运算符 msdn上 ...

  4. 使用jekyll主题

    github上面有很多基于jekyll的主题 https://github.com/theme4jekyll 使用起来也非常方便.直接clone到本地 这些主题,包括了很多模板,在新建博客的时候可以在 ...

  5. c# GridView Footor列求合计

    显示效果: 前台代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" ...

  6. EXW_FOB_CIF_CFR 外贸报价方式&条款之间的区别与联系

    一.工厂交货价(EXW=Ex Works): 交货地点:出口国工厂或仓库:  运 输:买方负责:  保 险:买方负责:  出口手续:买方负责:  进口手续:买方负责:  风险转移:交货地:  所有权转 ...

  7. spring springMVC mybatis 集成

    最近闲来无事,整理了一下spring springMVC mybatis 集成,关于这个话题在园子里已经有很多人写过了,我主要是想提供一个完整的demo,涵盖crud,事物控制等. 整个demo分三个 ...

  8. 嵌入式设备web服务器

    操作系统:ubuntu10.04 前言:    为了提高对设备的易操作性,很多设备中提供pc机直接通过浏览器操作设备的功能.这就需要在设备中实现web服务器.    现在在嵌入式设备中所使用的web服 ...

  9. ZOJ3477&JAVA大数类

    转:http://blog.csdn.net/sunkun2013/article/details/11822927 import java.util.*; import java.math.BigI ...

  10. java_IO流之 NIO

    NIO 定义 即新IO,在JDK1.4的java.nio.*包中引入,其目的在于提高速度. 在Java1.4之前的I/O系统中,提供的都是面向流的I/O系统,系统一次一个字节地处理数据,一个输入流产生 ...