【三角】圆角—三角—自适应_xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font:12px Arial, "宋体";}
.div0{ display:inline-block; *display:inline; *zoom:1; background:#ddd; margin:100px; padding:0 2px 0 8px;}
p{ width:300px; padding:6px; line-height:18px; word-wrap:break-word; word-break:normal;}

.div1,.div2,.div3{ display:inline-block; *display:inline; *zoom:1; position:relative; border-style:solid; border-color:black;}
.div1{ border-width:1px;}
.div2,.div3{ *left:-2px; border-width:0 1px; background-color:yellow;}
.div2{ margin:0 -2px;}
.div3{ margin:1px -2px; /*border-color:red;*/}

.arrow1,.arrow2{ position:absolute; top:7px; width:0; height:0; overflow:hidden; border-top:6px transparent dotted; border-bottom:6px transparent dotted;}
.arrow1{ left:-9px; border-right:6px black solid;}
.arrow2{ left:-8px; border-right:6px yellow solid;}
</style>
</head>

<body>
<div class="div0">
    <div class="div1">
        <!--=S 圆角 -->
        <div class="div2">
            <div class="div3">
                <p>无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</p>
            </div>
        </div>
        <!--=E 圆角 -->
        <!--=S 三角 -->
        <div class="arrow1"></div>
        <div class="arrow2"></div>
        <!--=E 三角 -->
    </div>
</div>
<!--
div1设置左右边框的原因是避免IE 6&7中的一个盒模型的小bug，有兴趣研究的话可去掉左右边框看下效果
此处IE 6&7中出现了margin-left负值无效的bug ，通过position:relative加left: -2px实现-->
</body>
</html>