先看下CSS盒模型

一个盒子包括: margin+border+padding+content

上下左右边框交界处出呈现平滑的斜线.

利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.

调整宽度大小可以调节三角形形状.

一般情况下, 我们设置盒子的宽高度, 及上下左右边框

<head>

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

<title></title>

<style type="text/css">

  .test{

      height:60px;

      width:60px;

      border-color:red green blue yellow;

      border-style:solid;

      border-width:30px;

  }

</style>

</head>

<body>

<div class="test"></div>

</body>

根据盒子模型，我们把div宽高度都设为0时,

<head>

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

<title></title>

<style type="text/css">

  .test{

      height:0px;/* div盒子设置高度设置为0 */

      width:0px;/* div盒子设置宽度设置为0 */

      border-color:red green blue yellow;

      border-style:solid;

      border-width:30px;

  }

</style>

</head>

<body>

<div class="test"></div>

</body>
 

为了兼容IE6，需要添加代码   _font-size: 0;    _line-height: 0;

<head>

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

<title></title>

<style type="text/css">

  .test{

      height:0px;/* div盒子设置高度设置为0 */

      width:0px;/* div盒子设置宽度设置为0 */

      border-color:red green blue yellow;

      border-style:solid;

      border-width:30px;

      overflow: hidden; /* 这里设置overflow, font-size, line-height */

      font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */

      line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */

  }

</style>

</head>

<body>

<div class="test"></div>

</body>

这时, 其实我们已经看到有上下左右四个三角形了..如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就是一个小三角了么

<head>

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

<title></title>

<style type="text/css">

  .test{

      height:0px;/* div盒子设置高度设置为0 */

      width:0px;/* div盒子设置宽度设置为0 */

      border-color:red  transparent transparent transparent;

      border-style:solid;

      border-width:30px;

      overflow: hidden; /* 这里设置overflow, font-size, line-height */

      font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */

      line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */

  }

</style>

</head>

<body>

<div class="test"></div>

</body>

可是, IE6下不支持透明啊~~~, 会出现下图的样子（换句话说IE6不支持transparent，而使用默认的背景色黑色）

为了解决这个兼容性问题，IE6下, 设置余下三条边的border-style为dashed，利用虚线样式的border可以形成天然无污染的空白，即可达到透明的效果。

即把原来的代码中的

border-style:solid;

换成

border-style:solid dashed dashed dashed;

上面我们画的小三角的斜边都是依靠原来盒子的边, 还有另外一种形式的小三角, 就是斜边在盒子的对角线上

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

<title></title>

<style type="text/css">

  .test{

      height:0px;/* div盒子设置高度设置为0 */

      width:0px;/* div盒子设置宽度设置为0 */

      border-color:red green transparent transparent;

      border-style:solid solid dashed dashed;

      border-width:30px;

      overflow: hidden; /* 这里设置overflow, font-size, line-height */

      font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */

      line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */

  }

</style>

</head>

<body>

<div class="test"></div>

</body>

保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形.

像这种不规则的三角形, 延伸一下, 放在气泡框上, 就可以省去拼背景图片的麻烦了.

另外, 关于气泡框, 可以用特殊字符模拟小三角同样需要用到定位和重叠覆盖，只不过不需要调整border属性了。

先来看一个菱形“◆” ，它在页面中的代码是“&#9670”，需要注意的是页面编码需要设置为utf-8，在网页中可以把◆当作文字处理，可以通过调整font-size来它的大小、通过color来设置它的颜色。

HTML结构依然用前面的，不同的是在em、span标签中加入了 ◆

<head>

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

<title></title>

<style type="text/css">

  /*先来设置最外层div的样式，得到一个矩形框*/

  .tag{

    width:300px;

    height:100px;

    position:relative;

    border:5px solid #09F;

  }

  /*接着定位箭头最外层容器div，便于观察可以先设置一个背景色*/

  .arrow{

    position:absolute;

    width:40px;

    height:40px;

    left:100px;

    bottom:-40px;

    overflow:hidden;

  }

  /*再对◆设置样式*/

  .arrow *{

    display:block;

    position:absolute;

    font-size:40px;

    line-height:40px;

    width:40px;

    font-family:SimSun;

    font-style:normal;

    font-weight:normal;

    text-align:center;

    vertical-align:middle;

  }

  /*注意：为了◆主流浏览器中显示一致，需要清除浏览器的默认字体样式，特别注意这里字体的设置再分别修改em、span标签的字体颜色，并对这两个标签定位：*/

  .arrow em{

    color:#09F;

    top:-15px;

  }

  .arrow span{

    color:#FFF;

    top:-22px;

  }

</style>

</head>

<body>

  <div class="tag">

      <div class="arrow">

        <em>◆</em>

        <span>◆</span>

      </div>

      CSS气泡框实现

  </div>

</body>

效果图为：

补充：以上方式实现小三角的过程中不可避免的增加了多余的标签，如果不要求所有浏览器中显示一致的话， 我们可以利用css3来实现这个小三角

<div class="tag">

    css3气泡框

</div>
.tag{

    width:300px;

    height:100px;

    border:5px solid #09F;

    position:relative;

    background-color:#FFF;

}

.tag:before,.tag:after{

    content:"";display:block;

    border-width:20px;

    position:absolute; bottom:-40px;

    left:100px;

    border-style:solid dashed dashed;

    border-color:#09F transparent transparent;

    font-size:;

    line-height:;

}

.tag:after{

    bottom:-33px;

    border-color:#FFF transparent transparent;

}

css border制作小三角形状及气泡框(兼容IE6)的更多相关文章

  1. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  2. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  3. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  4. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  5. 【小技巧】只用css实现带小三角的对话框样式

    一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <tit ...

  6. css border 制作三角形

    border 边框 上三角 是只有上面的border 有颜色,其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的bord ...

  7. CSS-border属性制作小三角

    1--三角向上下左上.右上.右下.左下这四个方向突出的样式 向左上角突出: border-color: transparent transparent transparent #FFCC00; bor ...

  8. css中书写小三角

    我们在开发过程中,有很多的方向标签不是图片,而是用css方法书写上去的. 首先我们要了解原理,border的边框的脚步是45度角. 向左方向: width:0px: height:0px: borde ...

  9. 无图片，用css border实现尖三角

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk" /> <style typ ...

随机推荐

  1. 福州大学软件工程1816 | W班 第10次作业[软件工程实践总结]

    作业链接 个人作业--软件工程实践总结 评分细则 本次由五个问题(每个十分)+创意照片(五分)+附加题(十分)组成 评分统计图 千帆竞发图 汇总成绩排名链接 汇总链接

  2. js去除数组重复成员

    js去除数组重复成员 第一种思路是:遍历要删除的数组arr, 把元素分别放入另一个数组tmp中,在判断该元素在arr中不存在才允许放入tmp中 用到两个函数:for ...in 和 indexOf() ...

  3. 7 Make vs Do

    1 英语中,含有 "do" 和 "make" 的词语, 例如 "make a suggestion" 和 "do your bes ...

  4. HashMap深度解析(转载)

    原文地址:http://blog.csdn.net/ghsau/article/details/16890151 实现原理:用一个数组来存储元素,但是这个数组存储的不是基本数据类型.HashMap实现 ...

  5. [转帖]wifi 4G 和 蓝牙的区别

    作者:沈万马链接:https://www.zhihu.com/question/64739486/answer/225227838来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  6. mysql数据库在linux上的不同登录方式和权限

    在我的上两篇博文里,一篇是安装,一篇是配置远程登录, 提君博客原创 >>提君博客原创  http://www.cnblogs.com/tijun/  << 所以我的mysql的 ...

  7. 剑指offer(14)

    题目: 操作给定的二叉树,将其变换为源二叉树的镜像. 思路: 这里有个细节,我们发现,6节点的子节点在操作之后并没有发生变化,所以等会我们在交换的时候,交换的不是节点的数值,而是整个节点. 另外我们进 ...

  8. Java语言中姐种遍历List的方法总结

    遍历 List 的方法: 1. for 2. advanced for 3. Iterator 4. while 5. ListIterator List<E> list 1. for f ...

  9. Window下通过SecureCRT的SSH2跳转到另一台Linux服务器

    我工作中的示例: 先登录192.168.2.145 Your password will be expired in 200 days.Welcome to Baoleiji System.Last ...

  10. admin快速搭建后台管理系统

    一.基于admin后台管理系统的特点: 权限管理:权限管理是后台管理系统必不可少的部分,拥有权限管理,可以赋予用户增删改查表权限(可以分别赋予用户对不同的表有不同的操作权限): 前端样式少:后台管理主 ...