转：纯CSS圆角 箭头 三角形 多边形 — CSS border的运用
JenniferMuMu 2012-06-24
To 原创作者，由于资料是早期收藏，原始地址已丢失，请见谅！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS圆角 箭头 三角形 多边形 — CSS border的运用</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
#demo1{position: relative;margin: 50px;width: 200px;}
#demo1 s{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #6cf #6cf transparent transparent;border-width: 15px;border-style:solid solid dashed dashed ;}
#demo1 b{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #fff #fff transparent transparent;border-width: 15px 5px;border-style: solid solid dashed dashed;}
.rc_top{height: 0;overflow: hidden;border-color: transparent transparent #6cf;border-width: 3px;border-style: dashed dashed solid;border-top: 0;}
.rc_btm{height: 0;overflow: hidden;border-color: #6cf transparent transparent;border-width: 3px;border-style: solid dashed dashed;border-bottom: 0;}
.rc_bd{height: 100px;padding: 10px;background: #6cf;color: #333;}
#demo2{width: 0;height: 0;margin: 60px;border-color: transparent transparent #f60;border-style: dashed dashed solid;border-width: 0 30px 50px 120px;}
#demo3{margin: 60px;}
#demo3 s{display: block;width: 86px;height: 0;overflow: hidden;border-color: transparent transparent #c6f;border-style: dashed dashed solid;border-width: 0 50px 86px; }
#demo3 b{display: block;width: 86px;height: 0;overflow: hidden;border-color:#c6f transparent transparent ;border-style: solid dashed dashed;border-width: 86px 50px 0; }
</style>
</head>
<body>
<div id="demo1">
<div class="rc_top"></div>
<div class="rc_bd">
锦瑟无端五十弦
</div>
<s></s>
<b></b>
<div class="rc_btm"></div>
</div>
<div id="demo2">
</div>
<div id="demo3">
<s></s>
<b></b>
</div>
</body>
</html>
