参考了天猫、微博等网站的做法，用纯html和css实现，效果还是不错的。
以下是成果，兼容主流浏览器，包括ie6。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="zh-CN" />

<meta name="Keywords" content="" />

<meta name="Description" content="" />

<title></title>

</head>

<style type="text/css">

*{margin:0; padding:0; list-style:none; font:normal 12px/150% 宋体; }

body{ padding:20px; }

.arrow{ margin-bottom:20px;  }

/* css三角形 */

.arrow,.arrow s { position:relative;  display:block; font-size: 0; line-            height: 0; width: 0; height: 0; border-color:transparent; border-style:dashed; border-width:5px; }

.arrowR,.arrowR s{ border-left-color:#aaa; border-left-style:solid; }

.arrowR s{ border-left-color:#fff; position:absolute; left:-7px; top:-5px; }

.arrowR:hover{ border-left-color:#f60;  }

.arrowL,.arrowL s{ border-right-color:#aaa; border-right-style:solid; }

.arrowL s{ border-right-color:#fff; position:absolute; right:-7px; top:-5px; }

.arrowL:hover{ border-right-color:#f60;  }

.arrowT,.arrowT s{ border-bottom-color:#aaa; border-bottom-style:solid; }

.arrowT s{ border-bottom-color:#fff; position:absolute; left:-5px; top:-3px; }

.arrowT:hover{ border-bottom-color:#f60;  }

.arrowB,.arrowB s{ border-top-color:#aaa; border-top-style:solid; }

.arrowB s{ border-top-color:#fff; position:absolute; left:-5px; bottom:-3px; }

.arrowB:hover{ border-top-color:#f60;  }

/* css圆形 */

.circle{ line-height:100%; overflow:hidden;  font-    family:Tahoma,Helvetica; font-size:18px; color:#aaa;  }

.circle:hover{ color:#f60;  }

/* 提示盒子 */

.tipBox{ width:200px; margin-top:10px;   }

.tipBox .hd{ height:5px;  position:relative;  }

.tipBox .hd .arrow{ position:absolute; top:-5px; left:10px; }

.tipBox .hd .arrow s{ top:-4px; }

.tipBox .bd{ border:1px solid #aaa; padding:10px;  -webkit-border-    radius:5px; -moz-border-radius:5px; border-radius:5px;  }

.tipBoxA .arrow s{ border-bottom-color:#f6f6f6;  }

.tipBoxA .bd{ background:#f6f6f6;  }

</style>

<body>

<a class="arrow arrowR"></a>

<a class="arrow arrowL"></a>

<a class="arrow arrowT"></a>

<a class="arrow arrowB"></a>

<a class="arrow arrowR"><s></s></a>

<a class="arrow arrowL"><s></s></a>

<a class="arrow arrowT"><s></s></a>

<a class="arrow arrowB"><s></s></a>

<a class="circle">•</a>

<div class="tipBox">

<div class="hd">

<s class="arrow arrowT"><s></s></s>

</div>

<div class="bd">

用css做的提示盒子，上三角是纯css，盒子圆角用到css3

</div>

</div>

<div class="tipBox tipBoxA">

<div class="hd">

<s class="arrow arrowT"><s></s></s>

</div>

<div class="bd">

用css做的提示盒子，上三角是纯css，盒子圆角用到css3

</div>

</div>

</body>

</html>

追求极致--纯css制作三角、圆形按钮，兼容ie6的更多相关文章

  1. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  2. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  3. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  4. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  6. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  7. 纯css实现省略号，兼容火狐，IE9，chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  9. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

随机推荐

  1. Object,equals,toString

    一.Object类 说明:Object类是Java中所有的类的直接或者间接的父类(基类). 该类中定义的是所有的类中的都有的的功能. 位置:可以从API中查找. 二.Object类之 equals 方 ...

  2. Zookeeper3.4.10 + ActiveMQ-5.15.0 集群搭建

    网上的教程真的是凤毛麟角,就不想说啥了,一次一次把我带入坑. 好了关于Zookeeper的搭建已经说好了,本文说说基于Zookeeper的MQ集群. 第一步.将mq安装包上传到CentOS7,并解压 ...

  3. (原)2018牛课多校第4场--G

    传送门 /* 按值从大到小排序,记录下相应出现的次数并去重 枚举:从大到小枚举,如果能够通过删除其他数让当前这个数成为众数,则循环结束,输出此数,如果循环结束也没答案,输出-1 优先级:值优先 举例: ...

  4. bin内置函数

    光棍们对1总是那么敏感,因此每年的11.11被戏称为光棍节.小Py光棍几十载,光棍自有光棍的快乐.让我们勇敢地面对光棍的身份吧,现在就证明自己:给你一个整数a,数出a在二进制表示下1的个数,并输出. ...

  5. How the Bitcoin protocol actually works

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  6. 设计模式---对象创建模式之工厂方法模式（Factory Method）

    前提:“对象创建”模式 通过“对象创建”模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式(表现最为突出) 工 ...

  7. JAVA记录-redis缓存机制介绍（一）

    1.redis介绍 Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Re ...

  8. logback异步输出日志（生产者消费者模型），并非批量写入日志。

    一直对logback异步输出日志误解为异步批量写入日志. 今天看了源代码. 首先logback的异步日志是如何配置的: <!-- 管理端用户行为日志异步输出,异步的log片段必须在同步段后面,否 ...

  9. 转--python之正则入门

    原文地址 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法 ...

  10. DotNetBar 中Ribbon汉化

    private void frmMain_Load(object sender, System.EventArgs e)        {            //  Ribbon汉化代码      ...