您当前的位置:首页 > 网站建设笔记 >

纯CSS实现带边框的三角形及气泡提示框

0

如果把HTML标签如<div>的宽度和高度都设置为0,那么在这种情况下设置边框会显示什么样子的?编写代码看效果:

<style type="text/css">
.nowh1 {
	width:0;height:0;
	margin:0 auto;
	border-width:30px;
	border-style:solid;
	border-color:#000000 #ffcc00 #009900 #cc3300;
}
</style>

<div class="nowh1"></div>

效果如下所示:

 

如果设置各边框的不同宽度又会是什么样子(例如将上边框的宽度设置为0)?编写代码看效果:

<style type="text/css">
.nowh2 {
	width:0;height:0;
	margin:0 auto;
	//上边框的宽度设置为0
	border-width:0px 30px 30px 30px;
	border-style:solid;
	border-color:#000000 #ffcc00 #009900 #cc3300;
}
</style>

<div class="nowh2"></div>

效果如下所示:

 

相信大家看到这里的时候,应该知道如何实现显示一个三角形了,没错,就是把上边框、左边框和右边框的颜色设置为透明,编写代码看效果:

<style type="text/css">
.nowh3 {
	width:0;height:0;
	margin:0 auto;
	//上边框的宽度设置为0
	border-width:0px 30px 30px 30px;
	border-style:solid;
	//上边框、左边框和右边框的颜色设置为透明
	border-color:transparent transparent #009900 transparent;
}
</style>

<div class="nowh3"></div>

效果如下所示:

 

再来,如果想实现带边框的三角形怎样实现?以下贴出HTML+CSS代码,有兴趣的站长们可以细读下。

<style type="text/css">
//箭头向上的三角形
.triangle_border_up {
	position:relative;
	width:0;height:0;
	margin:0 auto;
	border-width:0 30px 30px;
	border-style:solid;
	border-color:transparent transparent #333 transparent;
}
.triangle_border_up span {
	position:absolute;left:0;top:0;
	display:block;width:0;height:0;
	border-width:0 28px 28px;
	border-style:solid;
	border-color:transparent transparent #ffcc00 transparent;
	top:1px;
	left:-28px;
}
</style>

<div class="triangle_border_up"><span></span></div>

效果如下所示:

再进一步,我们可以使用这种技巧来实现带向上箭头的气泡提示框,如下代码及效果所示:

<style type="text/css">
.bubble-box {position:relative;width:200px;margin:0 auto;font-size:12px;background-color:#eee;text-align:center;}
.bubble-box a {color:#444;text-decoration:none}
.bubble-box .triangle-popup {
	position:absolute;left:50%;top:30px;margin-left:-61px;
	width:100px;padding:5px 10px;
	border:1px solid #333;border-radius:4px;
	color:#444;background-color:#ffcc00;
}
.bubble-box .triangle-popup span {
	position:absolute;left:50%;top:-10px;margin-left:-10px;
	display:block;width:0;height:0;
	border-width:0 10px 10px;
	border-style:solid;
	border-color:transparent transparent #333;
}
.bubble-box .triangle-popup span em {
	position:absolute;left:-10px;top:1px;
	display:block;width:0;height:0;
	border-width:0 10px 10px;
	border-style:solid;
	border-color:transparent transparent #ffcc00;
}
</style>

<div class="bubble-box"><a href="">三角形</a>
	<div class="triangle-popup"><span><em></em></span>纯CSS写带边框的三角形</div>
</div>
三角形
纯CSS写带边框的三角形
顶部中部底部