参考了天猫、微博等网站的做法，用纯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. Vue初学者可能不知道的坑

    1.setTimeout/ setInterval 场景一 :this指向改变无法用this访问vue实例 mounted(){ setTimeout( function () { //setInte ...

  2. Solr7.1---简单搜索

    本文环境基于上一节. and搜索 两种用法: apple AND banana +apple +banana [+是一元操作符,要求求后面的查询部分必需在文档中出现.AND是二元操作符,要求其左右两端 ...

  3. (转)hdu 3436Queue-jumpers--splay+离散化

    dalao博客 http://acm.hdu.edu.cn/showproblem.php?pid=3436 题意:初始排列1到N,现在要你实现3种操作: 将x插入到队头去 询问x当前的位置 询问第x ...

  4. OpenCV 无法启动此程序，因为计算机中丢失opencv_core249.dll。请尝试重新安装改程序已解决此问题

    换了64位的系统,配置好之后运行之前的程序,竟然给我抛出这个错误.应该是我的opencv没有安装对吧.系统报错 无法启动此程序,因为计算机中丢失opencv_core249.dll.请尝试重新安装改程 ...

  5. 门店评级VS坏客户

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

  6. 采集化工内容写入TXT文本

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  7. JAVA记录-SpringMVC国际化配置

    1.搭建SpringMVC框架,不过多阐述 2.spring-mvc.xml加入以下配置: <!-- 国际化资源配置,资源文件绑定器--> <bean id="messag ...

  8. Study 6 —— 字体和段落属性

    字体风格{font-style:normal | italic | oblique | inherit字体复合属性{font:font-style font-variant font-weight f ...

  9. Maven 手动添加第三方依赖包及编译打包和java命令行编译JAVA文件并使用jar命令打包

    一,实例:新建了一个Maven项目,在eclipse中通过 build path –> configure path-.将依赖包添加到工程中后,eclipse不报错了.但是用Maven命令 mv ...

  10. Java SE之Java中堆内存和栈内存[转/摘]

    [转/摘]1-3Java中堆内存和栈内存 注解:内存(Memory)即 内存储器,主存,其作用是用于暂时存放CPU中的运算数据,以及与硬盘等外部存储器(辅存)交换的数据. Java中把内存分为两种:栈 ...