参考了天猫、微博等网站的做法，用纯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. ( 大数 startsWith substring) Exponentiation hdu1063

    Exponentiation Time Limit: 2000/500 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  2. Linux网络协议栈(一)——Socket入门(1)

    转自: http://www.cnblogs.com/hustcat/archive/2009/09/17/1568738.html 1.TCP/IP参考模型为了实现各种网络的互连,国际标准化组织(I ...

  3. js位操作

    1.&(与) 都是1才是1 例如:14&15  (14  二进制  1110 15  二进制   1111 &与的结果  1110  ---->结果14) (14& ...

  4. JVM总结（三）：类文件结构

    这一节我们来总结一下类文件结构方面的知识.目录如下: 类文件结构 字节码的意义 Class类文件的结构 Class类文件的存储形式 Class文件的格式 Class类文件结构详解 举例详解 一.写程序 ...

  5. 1、JDBC-Connection

    新建Maven工程 pom.xml <dependencies> <dependency> <groupId>mysql</groupId> <a ...

  6. python---自定义分页类

    # coding:utf8 # __author: Administrator # date: 2018/3/7 0007 # /usr/bin/env python import tornado.w ...

  7. 5. SprigBoot自动配置原理

      配置文件到底能写什么?怎么写? 都可以在SpringBoot的官方文档中找到: 配置文件能配置的属性参照   1.自动配置原理: 1).SpringBoot启动的时候加载主配置类,开启了自动配置功 ...

  8. 设置PHPStorm 注释

    /** * Desc: xxx#if (${NAME}) * Class: ${NAME}#end#if (${NAMESPACE}) * Package: ${NAMESPACE}#end * Us ...

  9. Git操作学习笔记

    根据廖雪峰老师git教程学习整理 这里需要辨析一下概念.Github是代码托管平台,是协作的工具;而Git是版本控制工具.Git不需要联网,在本机就可以使用 集中式版本控制系统与分布式版本控制系统 S ...

  10. linux C sscanf()函数

    linux sscanf() 类似正则表达式,又不完全是正则表达式. 分割 ”/“ 或 "@" 或空格 要用 [^/] 例如: sscanf("iios/12DDWDFF ...