参考了天猫、微博等网站的做法，用纯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. 编译RocketMQ

    目前最新版本为 官方没有提供可执行的安装包,只提供了maven项目,去GitHub下载 点击Download ZIP 就可以了,如果你安装了版本控制工具 SVN 或者 GIT 就可以使用它上边的 UR ...

  2. vue-devtools chrome 开发工具

    1.github下载地址:https://github.com/vuejs/vue-devtools 有Git的同学直接 Git clone https://github.com/vuejs/vue- ...

  3. .Net MVC 当前上下文中不存在名称“Style”

    遇到了这种问题,最后居然是我拼写错误了... 当然也有其他原因 http://blog.csdn.net/bianchao1/article/details/69666347 按照上面这篇博客的方法先 ...

  4. vs2017_enterprise正式版离线安装包bt下载

    vs2017_enterprise正式版离线安装包bt下载 点击这里下载种子 磁力链接 安装前请先打开certificates目录,安装里面的三个证书 离线下载教程 : https://docs.mi ...

  5. Linux 命令详解（九）轻易删除OpenSSL 的后果

    警告自己,不要轻易的去删除系统的软件 1.composer自动更新出现错误 www@TinywanAliYun:~/web/go-study-line$ composer self-update Ke ...

  6. 010、base镜像 （2018-12-27 周四）

    参考https://www.cnblogs.com/CloudMan6/p/6799197.html   什么是base镜像       不依赖其他镜像,从scratch构建.或者是其他可以作为基础镜 ...

  7. FastReport.Net报表故障排除方法

    有不少开发人员在使用fastreport报表时遇到过这样的问题,报表设计器工作时,一些工具栏或者工具窗口被损坏了.此时,你应该删除配置文件,该文件是在你启动fastreport时创建的.它位于以下文件 ...

  8. Linux 重启网卡失败 Job for network.service failed because the control process exited with error code. See "systemctl status network.service" and "journalctl -xe" for details.

    linux下重启网卡使用命令 : service network restart 时报错: [root@slave01 hadoop]# service network restart Startin ...

  9. MySQL - 日常操作三 mysql慢查询；

    sql语句使用变量 use testsql; set @a=concat('my',weekday(curdate())); # 组合时间变量 set @sql := concat('CREATE T ...

  10. C语言入门教程-(6)运算符

    1.运算符概述 运算符是一种编译器执行特定的数学或逻辑操作的符号.C语言提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 条件运算符 其他运算符 2.算术运算符 算术 ...