参考了天猫、微博等网站的做法，用纯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. 2018.9南京网络预选赛(J)

    传送门:Problem J https://www.cnblogs.com/violet-acmer/p/9720603.html 变量解释: need[ i ] : 第 i 个房间含有的旧灯泡个数. ...

  2. xargs与exec详解

    一.场景 这个命令是错误的 1 find ./ -perm +700 |ls -l 这样才是正确的 1 find ./ -perm +700 |xargs ls -l  二.用法 1 2 3 4 5 ...

  3. DataSet in Machine Learning

    一.UCI Wine dataset:https://archive.ics.uci.edu/ml/datasets/Wine,包含178个样本,每个样本包含13个与酒的化学特性的特征,标签有1,2, ...

  4. Spark进阶之路-Spark HA配置

    Spark进阶之路-Spark HA配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 集群部署完了,但是有一个很大的问题,那就是Master节点存在单点故障,要解决此问题,就要借 ...

  5. Spark记录-Scala基础程序实例

    object learn { def main(args:Array[String]):Unit={ println("请输入两个数字:") var a:Int=Console.r ...

  6. Shell编程（一）概览

    1. Shell功能 1. 自动化批量系统初始化程序(update.软件安装.时区设置.安全策略.......) 2. 自动化批量软件部署程序(LAMP.LNMP.Tomcat.LVS.Nginx) ...

  7. pd.qcut, pd.cut, df.groupby()等在分组和聚合方面的应用

    pd.qcut, pd.cut, df.groupby()等在分组和聚合方面的应用 量化交易里, 需要进行大量的分组和统计, 以方便自己处优势的位置/机会. 比如对股价进行趋势分析, 波动性分析, 量 ...

  8. readline.c

    一.第一版 #include <unistd.h> #include <errno.h> ssize_t readline(int fd, void *vptr, size_t ...

  9. 淘淘商城之SSM框架整合概要

    一.后台系统所用的技术 1)框架:Spring + SpringMVC + Mybatis: 2)前端:EasyUI: 3)数据库:mysql 二.创建数据库 1)安装mysql数据库: 2)在mys ...

  10. Nginx 内核优化

    内核参数的优化示例: /etc/sysctl.conf net.ipv4.tcp_max_tw_buckets = // timewait的数量,默认是180000. net.ipv4.ip_loca ...