效果图如下：
源码：
<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3c.org/tr/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{color: #fff;}
.test{
width: 300px;
padding: 30px 20px;
margin: 60px;
background: #ce5010;
position: relative;
border-radius: 10px;
}
.test span{
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
}
.test span.bot{
border-width: 20px;
border-style: solid;
border-color: transparent #ce5010 #ce5010 transparent;
left: -40px;
top: 40px;
}
.test span.top{
border-width: 10px 20px;
border-style: solid;
border-color: transparent #fff #fff transparent;
left: -40px;
top: 60px;
}
.test .orgBotCor{
color: #333;
font-size: 60px;
position: absolute;
line-height: 60px;
top: -30px;
color: #ce5010;
}
.test.newBG span.bot2{
border-width: 20px;
border-style: solid dashed dashed; /*这里用dashed是为了解决防止IE6下的bug， 如果是solid，无法显示透明，具体原因不明*/
border-color: #ce5010 transparent transparent;
bottom: -40px;
}
.test.newBG span.top2{
border-width: 20px;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
bottom: -33px;
}
.newBG{
background-color: #fff;
border: #ce5010 5px solid;
color: #ce5010;
}
.orangeColor{
color: #ce5010;
}
</style>
</head>
<body>
<div class="test">
<span class="bot"></span>
<span class="top"></span>
<p>CSS"边框法"实现气泡对话框效果，需要两个辅助span</p>
</div>
<div class="test">
<b class="orgBotCor">◆</b>
<p>CSS"符号法"实现气泡对话框效果，需要一个<b></p>
</div>
<div class="test newBG">
<span class="bot2"></span>
<span class="top2"></span>
<p class="orangeColor">CSS"边框法"实现气泡对话框效果，需要两个<span></p>
</div>
</body>
<html>
时间： 2024-10-17 14:29:26