css border制作小三角形状及气泡框(兼容IE6)

先看下CSS盒模型

css border制作小三角形状及气泡框(兼容IE6)

一个盒子包括: 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>

css border制作小三角形状及气泡框(兼容IE6)

根据盒子模型,我们把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>
 

css border制作小三角形状及气泡框(兼容IE6)

为了兼容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,而使用默认的背景色黑色)

css border制作小三角形状及气泡框(兼容IE6)

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

即把原来的代码中的

border-style:solid;

换成

border-style:solid dashed dashed dashed;

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

css border制作小三角形状及气泡框(兼容IE6)

<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>

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

css border制作小三角形状及气泡框(兼容IE6)

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

css border制作小三角形状及气泡框(兼容IE6)

另外, 关于气泡框, 可以用特殊字符模拟小三角同样需要用到定位和重叠覆盖,只不过不需要调整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>

效果图为:

css border制作小三角形状及气泡框(兼容IE6)

补充:以上方式实现小三角的过程中不可避免的增加了多余的标签,如果不要求所有浏览器中显示一致的话, 我们可以利用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;
}
上一篇:20165220 实验三 敏捷开发与XP实践 实验报告


下一篇:NTKO控件在阅读PDF时,显示DEMO的问题