<!doctype html><html><head><meta charset="utf-8">
<title>纯css的圆角提示框全兼容_www.youkud.com</title>
<style>
/*公共样式*/
.test{width:100%;font-size:12px; position:relative;}
.bBottom,.tTop{height:2px; background:transparent;}
.b2,.t1{border-top:#F30 solid 1px; margin:0 2px; height:0; overflow:hidden; display:block;}
.b1,.t2{border-right:#F00 solid 1px;border-left:#F00 solid 1px; margin:0 1px; display:block; height:1px; overflow:hidden;}
.content{border:#F00 solid 1px; border-top:none; border-bottom:none; padding:5px 10px;}
.s1_s2{position:absolute; left:5%;overflow:hidden; width:12px; height:6px; bottom:-5px;}
.s1{color:#F00; position:absolute; margin-top:-6px;}
.s2{color:#F00; position:absolute; margin-top:-7px; color:#FFF;}
/*各种颜色*/
/*blue*/
.blue{border-color:blue; color:blue;}
.red{border-color:red; color:red;}
.yellow{border-color:yellow; color:yellow;}
.green{border-color:green; color:green;}
.pink{border-color:pink; color:pink;}
</style>
</head>
<body>
<div class="test">
<div class="tTop">
<span class="t1"></span>
<span class="t2"></span>
</div>
<div class="content">
这里提示的文字
</div>
<div class="bBottom">
<span class="b1"></span>
<span class="b2"></span>
</div>
<div class="s1_s2">
<span class="s1">◆</span>
<span class="s2">◆</span>
</div>
</div>
<br>
<div class="test">
<div class="tTop">
<span class="t1 blue"></span>
<span class="t2 blue"></span>
</div>
<div class="content blue">
这里提示的文字
</div>
<div class="bBottom">
<span class="b1 blue"></span>
<span class="b2 blue"></span>
</div>
<div class="s1_s2">
<span class="s1 blue">◆</span>
<span class="s2">◆</span>
</div>
</div>
<br>
<div class="test">
<div class="tTop">
<span class="t1 yellow"></span>
<span class="t2 yellow"></span>
</div>
<div class="content yellow">
这里提示的文字
</div>
<div class="bBottom">
<span class="b1 yellow"></span>
<span class="b2 yellow"></span>
</div>
<div class="s1_s2">
<span class="s1 yellow">◆</span>
<span class="s2">◆</span>
</div>
</div>
<br>
<div class="test">
<div class="tTop">
<span class="t1 green"></span>
<span class="t2 green"></span>
</div>
<div class="content green">
这里提示的文字
</div>
<div class="bBottom">
<span class="b1 green"></span>
<span class="b2 green"></span>
</div>
<div class="s1_s2">
<span class="s1 green">◆</span>
<span class="s2">◆</span>
</div>
</div>
<br>
<div class="test">
<div class="tTop">
<span class="t1 pink"></span>
<span class="t2 pink"></span>
</div>
<div class="content pink">
这里提示的文字
</div>
<div class="bBottom">
<span class="b1 pink"></span>
<span class="b2 pink"></span>
</div>
<div class="s1_s2">
<span class="s1 pink">◆</span>
<span class="s2">◆</span>
</div>
</div>
</body></html>
